Practice of Vue global custom instruction Modal drag

import Vue from 'vue'

// Pop-up window drag properties/**
 * @directive custom attributes * @todo pop-up drag attributes * @desc add v-drag using any html loaded inside the pop-up
 * @param .ant-modal-header The properties of the pop-up window header used for dragging* @param .ant-modal The properties to drag*/
Vue.directive('drag', (el, binding, vnode, oldVnode) => {
  // inserted (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;'

    // Get the original attributes ie dom element.currentStyle firefox google window.getComputedStyle(dom element, null);
    const sty = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
      // Mouse pressed, calculate the distance between the current element and the visible area const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth // Current width of body const screenHeight = document.documentElement.clientHeight // Visible area height (should be body height, but cannot be obtained in some environments)

      const dragDomWidth = dragDom.offsetWidth // Dialog box width const dragDomheight = dragDom.offsetHeight // Dialog box height const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth - (isThemeModal ? 10 : 0)

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

      // Get the value with px regular expression to replace let styL = sty(dragDom, 'left')
      let styT = sty(dragDom, 'top')

      // Note that in IE, the first value obtained is the component's own 50% and the value is assigned to px after moving
      if (styL.includes('%')) {
        // eslint-disable-next-line no-useless-escape
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        // eslint-disable-next-line no-useless-escape
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      };

      document.onmousemove = function (e) {
        // Calculate the moving distance through event delegation let left = e.clientX - disX
        let top = e.clientY - disY

        // Boundary processing if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft)
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop)
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }
        // Move the current element dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
      }

      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  })
})

...
<a-modal v-model="visible" title="Prompt" :maskClosable="false" @cancel="handleCancle" @ok="handleOk" v-drag>
  <p>Are you sure you want to delete the field?</p>
</a-modal>
...