Vueグローバルカスタム命令の実践 モーダルドラッグ

Vueグローバルカスタム命令の実践 モーダルドラッグ

背景

最近取り組んでいるプロジェクトは、Vue2 で構築されたプロジェクトで、UI フレームワークは antdV を使用しています。プロジェクトでは、モーダル ダイアログ ボックスが多数使用されています。ある日突然、製品が「このダイアログ ボックスは移動できないのはなぜですか? 情報のビューがブロックされています」と言いました。仕方ありません。需要があれば、私たちはそれをやるしかありません。これが新しい世代の労働者です。

まず、antdV 公式サイトにアクセスして、Modal の構成プロパティとメソッドを調べ、この問題を直接解決できるプロパティやメソッドがあるかどうかを確認しましたが、見つかりませんでした。 2 番目のステップは、Baidu に問い合わせを開始することでした。関連するブログはいくつかありましたが、一般的に言えば、多様すぎて理解するのが困難でした。その後、グローバルカスタム仕様を使用する興味深い方法があることがわかり、自分で問題を解決し始めました。

実装のアイデア

まず、主にモーダル ボックスのヘッド部分にマウスを置いたときに左ボタンを押した後にダイアログ ボックスを移動する効果を完成させます。

ここでは、ヘッダー要素を取得してその onmousedown メソッドをリッスンし、onmousedown メソッドの実行中にダイアログ ボックスの高さと幅を計算して境界制限を設定し、ダイアログ ボックスが画面から外れないようにします。次に、document.onmousemove メソッドをリッスンしてマウスの移動方向と距離を計算し、これに基づいてダイアログ ボックスの位置を調整します。

コードの実装

'vue' から Vue をインポートします

// ポップアップウィンドウのドラッグプロパティ/**
 * @directive カスタム属性 * @todo ポップアップドラッグ属性 * @desc ポップアップ内に読み込まれた HTML を使用して v-drag を追加します
 * @param .ant-modal-header ドラッグに使用するポップアップウィンドウのヘッダーのプロパティ* @param .ant-modal ドラッグするプロパティ*/
Vue.directive('drag', (el, binding, vnode, oldVnode) => {
  // 挿入された (el、binding、vnode、oldVnode) {
  Vue.nextTick(() => {
    const isThemeModal = el.classList.contains('grid-theme')
    const dialogHeaderEl = isThemeModal ? el.querySelector('.ant-tabs-bar'): document.querySelector('.ant-modal-header')
    const dragDom = isThemeModal ? el.querySelector('.ant-modal') : document.querySelector('.ant-modal')
    //dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.style.cssText += ';cursor:move;'
    // dragDom.style.cssText += ';top:0px;'

    // 元の属性を取得します (例: dom element.currentStyle firefox google window.getComputedStyle(dom element, null);
    const sty = (関数() {
      (window.document.currentStyle)の場合{
        戻り値 (dom, attr) => dom.currentStyle[attr]
      } それ以外 {
        戻り値 (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    ダイアログヘッダーEl.onmousedown = (e) => {
      // マウスが押されたら、現在の要素と表示領域の間の距離を計算します。const disX = e.clientX - dialogHeaderEl.offsetLeft
      定数 disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth // 本文の現在の幅 const screenHeight = document.documentElement.clientHeight // 表示領域の高さ (本文の高さになるはずですが、環境によっては取得できません)

      const dragDomWidth = dragDom.offsetWidth // ダイアログボックスの幅 const dragDomheight = dragDom.offsetHeight // ダイアログボックスの高さ const minDragDomLeft = dragDom.offsetLeft
      定数 maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth - (isThemeModal ? 10 : 0)

      定数 minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight - (isThemeModal ? 10 : 0)

      // 置換するpx正規表現で値を取得します。let styL = sty(dragDom, 'left')
      styT = sty(dragDom, 'top') とします。

      // IEでは、最初に取得される値はコンポーネント自身の50%であり、その値は移動後にpxに割り当てられることに注意してください。
      (styL.includes('%'))の場合{
        // eslint は次の行を無効にして、無駄なエスケープを禁止します
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        // eslint は次の行を無効にして、無駄なエスケープを禁止します
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } それ以外 {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      };

      document.onmousemove = 関数 (e) {
        // イベント委譲を通じて移動距離を計算する let left = e.clientX - disX
        top = e.clientY - disY とします。

        // 境界処理 if (-(left) > minDragDomLeft) {
          左 = -(minDragDomLeft)
        } そうでない場合 (左 > maxDragDomLeft) {
          左 = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          上 = -(minDragDomTop)
        } そうでない場合 (top > maxDragDomTop) {
          上 = maxDragDomTop
        }
        // 現在の要素を移動する dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
      }

      document.onmouseup = 関数 (e) {
        ドキュメント.onmousemove = null
        document.onmouseup = null
      }
    }
  })
})

コンポーネント呼び出し
AモーダルコンポーネントはVドラッグに設定できる

...
<a-modal v-model="visible" title="プロンプト" :maskClosable="false" @cancel="handleCancle" @ok="handleOk" v-drag>
  <p>フィールドを削除してもよろしいですか?</p>
</a-modal>
...

成果を達成する

Vue グローバルカスタムディレクティブの Modal drag の実践に関するこの記事はこれで終わりです。より関連性の高い Vue Modal drag コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueカスタムディレクティブの詳細
  • Vueのカスタムディレクティブの詳細なガイド
  • Vue2.x および Vue3.x のカスタム命令の使用方法とフック関数の原理を理解する
  • Vue でのカスタムディレクティブの基本的な使用方法
  • Vue.js ディレクティブのカスタム命令の詳細な説明
  • Vueカスタム指示により、ポップアップウィンドウのドラッグ4辺ストレッチと対角ストレッチ効果を実現
  • Vueカスタム命令の詳細な説明

<<:  nginxカスタム変数と組み込み定義済み変数の使用

>>:  一般的な MySQL 関数の例の概要 [集計関数、文字列、数値、時刻と日付の処理など]

推薦する

MySQLは「order by」がどのように機能するかを簡単に理解します

並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...

CSSのline-heightとheightの詳細な説明

最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...

HTML の doctype とエンコーディングに関する簡単な説明

文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...

Linux/Mac MySQL パスワードを忘れた場合の対処方法

Linux/Mac の MySQL パスワードを忘れた場合はどうすればいいですか?心配しないでくださ...

CSS テキスト配置実装コード

フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...

K3s 入門ガイド - Docker で K3s を実行するための詳細なチュートリアル

k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

MySQL 8.0.26 のインストールとアンインストールの完全なステップバイステップの記録

目次序文1. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...

vue-cropper コンポーネントは画像の切り取りとアップロードを実現します

この記事では、画像の切り取りとアップロードを実装するためのvue-cropperコンポーネントの具体...

MySQL インデックスの長さ制限の原理の分析

この記事は主に、MySQL インデックスの長さ制限の原理の分析を紹介します。サンプル コードを通じて...

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...

XHTML 3つの文書型宣言

XHTML は 3 つのドキュメント タイプ宣言を定義します。最もよく使用されるのは XHTML T...

MySQLトランザクションの特徴と分離レベルについてお話ししましょう

インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...

mysql8.0 でユーザーを作成して権限を付与する際のエラーの解決方法の詳細な説明

質問1:エラーを報告する書き込み方法: GRANT OPTION を使用して、'123123...