Praxis der Vue Global Custom-Anweisung Modal Drag

Vue von „vue“ importieren

// Popup-Fenster Drag-Eigenschaften/**
 * @directive benutzerdefinierte Attribute * @todo Pop-up-Drag-Attribute * @desc V-Drag hinzufügen unter Verwendung von beliebigem HTML, das im Pop-up geladen wird
 * @param .ant-modal-header Die Eigenschaften der Popup-Fensterüberschrift, die zum Ziehen verwendet wird* @param .ant-modal Die zu ziehenden Eigenschaften*/
Vue.directive('drag', (el, binding, vnode, oldVnode) => {
  // eingefügt (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 = 'verschieben';
    dialogHeaderEl.style.cssText += ';cursor:bewegen;'
    // dragDom.style.cssText += ';top:0px;'

    // Holen Sie sich die ursprünglichen Attribute, d. h. dom element.currentStyle firefox google window.getComputedStyle(dom element, null);
    const sty = (Funktion () {
      wenn (Fenster.Dokument.aktuellerStil) {
        return (dom, attr) => dom.aktuellerStyle[attr]
      } anders {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
      // Maus gedrückt, berechne den Abstand zwischen dem aktuellen Element und dem sichtbaren Bereich const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth // Aktuelle Breite des Textkörpers const screenHeight = document.documentElement.clientHeight // Höhe des sichtbaren Bereichs (sollte der Textkörperhöhe entsprechen, kann aber in manchen Umgebungen nicht ermittelt werden)

      const dragDomWidth = dragDom.offsetWidth // Dialogfeldbreite const dragDomheight = dragDom.offsetHeight // Dialogfeldhöhe const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = Bildschirmbreite – dragDom.offsetLeft – dragDomWidth – (isThemeModal? 10: 0)

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = Bildschirmhöhe – dragDom.offsetTop – dragDomheight – (isThemeModal? 10: 0)

      // Holen Sie sich den Wert mit dem regulären Ausdruck px, um let styL = sty(dragDom, 'left') zu ersetzen.
      lass styT = sty(dragDom, 'oben')

      // Beachten Sie, dass im IE der erste erhaltene Wert die eigenen 50 % der Komponente sind und der Wert nach dem Verschieben px zugewiesen wird
      wenn (styL.includes('%')) {
        // eslint-disable-next-line kein nutzloses Escape
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        // eslint-disable-next-line kein nutzloses Escape
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } anders {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      };

      document.onmousemove = Funktion (e) {
        // Berechnen Sie die Bewegungsdistanz durch Ereignisdelegierung let left = e.clientX - disX
        let top = e.clientY - disY

        // Randverarbeitung if (-(left) > minDragDomLeft) {
          links = -(minDragDomLeft)
        } sonst wenn (links > maxDragDomLeft) {
          links = maxDragDomLeft
        }

        wenn (-(oben) > minDragDomTop) {
          oben = -(minDragDomTop)
        } sonst wenn (oben > maxDragDomTop) {
          oben = maxDragDomTop
        }
        // Aktuelles Element verschieben dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
      }

      Dokument.onmouseup = Funktion (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  })
})

...
<a-modal v-model="sichtbar" title="Eingabeaufforderung" :maskClosable="false" @cancel="handleCancle" @ok="handleOk" v-drag>
  <p>Möchten Sie das Feld wirklich löschen?</p>
</a-modal>
...