Benutzerdefinierte Vue-Anweisungen zum Erzielen eines vierseitigen Streckungs- und diagonalen Streckungseffekts beim Ziehen von Popup-Fenstern

<Vorlage>
  <div
    Klasse="Parameter"
    v-dialogDrag
  >
    <div class="title">Titel<div class="close">
        <Bild
          src="../assets/schließen.png"
          alt=""
        >
      </div>
    </div>
    <div class="content">Inhaltsbereich</div>
  </div>
</Vorlage>

<style lang="less">
.parameter {
  Höhe: 569px;
  Breite: 960px;
  Position: absolut;
  links: 50%;
  oben: 50 %;
  Rand links: berechnet (-960px / 2);
  Rand oben: berechnet (-569px / 2);
  Z-Index: 999;
  Hintergrund: #fff;
  Box-Größe: Rahmenbox;
  Kastenschatten: 0px 12px 32px 0px rgba (0, 0, 0, 0,08);
  Rahmenradius: 2px;
  .Titel {
    Anzeige: Flex;
    Schriftgröße: 16px;
    Höhe: 48px;
    Zeilenhöhe: 48px;
    Hintergrund: #f5f5f5;
    Box-Größe: Rahmenbox;
    Box-Schatten: Einschub 0px -1px 0px rgba(0, 0, 0, 0,12);
    Rahmenradius: 2px 2px 0px 0px;
    Polsterung: 0 20px;
    Z-Index: 99;
    Schriftgröße: 16px;
    Schriftstärke: 500;
    Farbe: rgba(0, 0, 0, 0,85);
    .schließen {
      img {
        Breite: 10px;
      }
      margin-left: auto; // rechtsbündig}
  }
  .Inhalt {
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Höhe: berechnet (100 % – 48 Pixel);
    Box-Größe: Rahmenbox;
    Hintergrund: #fff;
    Überlauf: automatisch;
  }
}
</Stil>

Vue von „vue“ importieren
importiere ElementUI von „element-ui“;
importiere „element-ui/lib/theme-chalk/index.css“;
App aus „./App.vue“ importieren
importiere '../drag.js'

Vue.config.productionTip = falsch
Vue.use(ElementUI);

neuer Vue({
  rendern: h => h(App),
}).$mount('#app')

Vue von „vue“ importieren
// v-dialogDrag: Popup-Fenster ziehen + horizontale Streckung + diagonale Streckung Vue.directive('dialogDrag', {
  binden(el) {
  	// dialogHeaderEl ist die Titelleiste, binde das Mousedown-Ereignis zum Ziehen const dialogHeaderEl = el.querySelector('.title')
   	// dragDom ist das an die Anweisung gebundene Dom-Element. Definieren Sie Variablen, um die Unterscheidung zu erleichtern const dragDom = el
    // Alle CSS-Attribute abrufen, Kompatibilitätsschreibmethode, d. h. Dom-Element.currentStyle, Firefox, Google, Window.getComputedStyle(Dom-Element, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) 
    //Mausklickereignis definieren const moveDown = e => {
      // e.clientX, Y: X-, Y-Koordinaten der Maus relativ zum sichtbaren Fenster des Browsers // offsetTop, offsetLeft: Der Abstand des aktuellen Elements relativ zum oberen und linken Rand seines offsetParent-Elements. Hier hat der Titel keinen Positionierungsoffset, also ist er 0	
      :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

      // Aus Kompatibilitätsgründen mit IE
      wenn (styL === 'auto') styL = '0px'
      sei styT = sty.top

      // 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 (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
        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
        }

        // Verschiebe das aktuelle Element dragDom.style.left = `${left + styL}px`
        dragDom.style.top = `${top + styT}px`
        
	// Verhindere, dass sich das Popup-Fenster bewegt, wenn die Maus angehoben wird. document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
    dialogHeaderEl.onmousedown = nach unten bewegen    
  }
})

 // Mouseover-Stil definieren const CURSORTYPE = {
      oben: 'n-resize',
      unten: 's-resize',
      links: 'w-resize',
      rechts: 'e-resize',
      // right_top wird zur einfacheren Datenverarbeitung in den folgenden Code geschrieben right_top: 'ne-resize', 
      left_top: 'nw-Größe ändern',
      links_unten: 'sw-Größe ändern',
      rechts unten: 'se-resize',
      Standard: „Standard“,
    };

    // Bestimmen Sie den Typ des Mouseover-Zeigers const checkType = obj => {
      const { x, y, links, oben, Breite, Höhe } = obj
      lass Typ
      wenn (x > links + Breite - 5 und el.scrollTop + y <= oben + Höhe - 5 und oben + 5 <= y) {
        Typ = "rechts"
      }
      sonst wenn (links + 5 > x und el.scrollTop + y <= oben + Höhe - 5 und oben + 5 <= y) {
        Typ = "links"
      } sonst wenn (el.scrollTop + y > oben + Höhe - 5 && x <= links + Breite - 5 && links + 5 <= x) {
        Typ = "unten"
      } sonst wenn (oben + 5 > y && x <= links + Breite - 5 && links + 5 <= x) {
        Typ = "oben"
      } sonst wenn (x > links + Breite - 5 und el.scrollTop + y > oben + Höhe - 5) {
        Typ = "rechts_unten"
      } sonst wenn (links + 5 > x && el.scrollTop + y > oben + Höhe - 5) {
        Typ = "links_unten"
      } sonst wenn (oben + 5 > y && x > links + Breite - 5) {
        Typ = "oben rechts"
      } sonst wenn (oben + 5 > y && links + 5 > x) {
        Typ = "links_oben"
      }
      Rückgabetyp || „Standard“
    }

  // Randbedingungen bestimmen const boundageLimit = obj => {
      const { links, oben, Breite, Höhe, diffX, diffY, Bildschirmhöhe, Bildschirmbreite, arr } = obj
      if (arr[0] == 'rechts' || arr[1] == 'rechts') {
        if (Breite + diffX > Bildschirmbreite - links) {
          dragDom.style.width = Bildschirmbreite - links + 'px'
        } anders {
          dragDom.style.width = Breite + diffX + 'px'
        }
      }
      wenn (arr[0] == 'links' || arr[1] == 'links') {
        wenn (Breite - diffX > Breite + links) {
          dragDom.style.width = Breite + links + 'px'
          dragDom.style.left = - parseInt(sty.marginLeft) + 'px'
        } anders {
          dragDom.style.width = Breite - diffX + 'px'
          // left eigentlich = left + marginLeft. Bei der Berechnung muss marginLeft abgezogen werden. dragDom.style.left = left + diffX - parseInt(sty.marginLeft) + 'px'
        }
      }
      wenn (arr[0] == 'oben' || arr[1] == 'oben') {
        wenn (Höhe - diffY > Höhe + Spitze) {
          dragDom.style.height = Höhe + oben + 'px'
          dragDom.style.top = - parseInt(sty.marginTop) + 'px'
        } anders {
          dragDom.style.height = Höhe – diffY + „px“
          // top eigentlich = top + marginTop. MarginTop muss bei der Berechnung abgezogen werden. dragDom.style.top = top + diffY - parseInt(sty.marginTop) + 'px'
        }
      }
      wenn (arr[0] == 'unten' || arr[1] == 'unten') {
        if (Höhe + diffY > Bildschirmhöhe - oben) {
          dragDom.style.height = Bildschirmhöhe – oben
        } anders {
          dragDom.style.height = Höhe + diffY + 'px'
        }
      }
    }
    dragDom.onmousedown = e => {
      const x = e.clientX
      const y = e.clientY
      const width = dragDom.clientWidth
      const height = dragDom.clientHeight
      const left = dragDom.offsetLeft
      const top = dragDom.offsetTop
      const Bildschirmbreite = document.documentElement.clientWidth || document.body.clientWidth
      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
      // dragDom.style.userSelect = "keine"
      let type = checkType({ x, y, links, oben, Breite, Höhe })
      // Bestimmen Sie, ob es sich um eine Popup-Fensterüberschrift handelt, wenn (x > left &&
        x < links + Breite &&
        y > oben + 5 &&
        y < top + dialogHeaderEl.clientHeight) {
        // dialogHeaderEl.onmousedown = nach unten bewegen
      } anders {
        document.onmousemove = Funktion (e) {
          // Standardereignisse beim Verschieben deaktivieren e.preventDefault()
          let endX = e.clientX
          let endY = e.clientY
          sei diffX = endX - x
          sei diffY = endY - y
          lass arr
          //Konvertiere den Typ in das Array-Format, um die Codebeurteilung zu vereinfachen, und rufe if (type.indexOf('_') == -1) { auf.
            arr = [Typ, '']
          } anders {
            arr = Typ.split('_')
          }
          BoundaryLimit({ links, oben, Breite, Höhe, diffX, diffY, Bildschirmhöhe, Bildschirmbreite, arr })
        }
        // Strecken endet document.onmouseup = function () {
          document.onmousemove = null

          document.onmouseup = null
        }
      }
    }

<Vorlage>
  <div
    Klasse="Parameter"
    v-dialogDrag
  >
    <div class="title">Titel<div class="close">
        <Bild
          src="../assets/schließen.png"
          alt=""
        >
      </div>
    </div>
    <div class="content">Inhaltsbereich</div>
    <div Klasse="rightBlank">123</div>
    <div Klasse="bottomBlank">456</div>
  </div>
</Vorlage>