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

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