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挿入パフォーマンスを最適化する方法の例

MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...

モバイル開発チュートリアル: ピクセル表示の問題の概要

序文モバイル端末の開発の過程で、モバイル端末のディスプレイはデスクトップ端末のディスプレイとは一般的...

HTML 名、ID、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。

ページには多くのコントロール (要素またはタグ) があります。これらのタグをより便利に操作するには、...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...

HTML 縦列表示テキストを使用してテキストを縦列で表示します

コードをコピーコードは次のとおりです。 <span style='display:bl...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)

目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....

Vue 初心者ガイド: 環境の構築と開始方法

目次初期ビューVue開発環境の構築Vueインスタンスの作成Vue テンプレート構文Vue データバイ...

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...

スケジュールされた時間に古いジャンクファイルを自動的に削除する Linux 用の Autotrash ツール

Autotrash は、古い削除済みファイルを消去するプロセスを自動化するコマンド ライン プログラ...

MySQLはinit-connectを使用してアクセス監査機能の実装を増やします

まず init-connect を通じて mysql 接続を初期化し、次にインスタンスに接続する必要...

Windows10 HomeバージョンにDockerをインストールするときに発生する問題の概要

Docker ダウンロード アドレス: http://get.daocloud.io/#instal...