Vue implementiert die Funktionen Vergrößern, Verkleinern und Ziehen

importiere Vue von „vue“;
importiere bigPic aus „../assets/images/bigChange.png“;
// v-dialogDrag: Popup-Fenster-Drag-Attribut Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    //Die Mindestbreite und -höhe der Bullet-Box sei minWidth = 400; 
    sei minHeight = 300; 
    //Anfänglicher nicht-Vollbildmodus let isFullScreen = false; 
    //Aktuelle Breite und Höhe let nowWidth = 0; 
    lass jetztHöhe = 0; 
    //Aktuelle obere Höhe let nowMarginTop = 0; 
    //Kopfzeile des Popup-Fensters abrufen (dieser Teil kann durch Doppelklicken im Vollbildmodus angezeigt werden) 
    const dialogHeaderEl = el.querySelector('.el-dialog__header'); 
    //Popup-Fenster const dragDom = el.querySelector('.el-dialog'); 
    // Vollbild-Schaltfläche dialogHeaderEl.insertAdjacentHTML('beforeEnd', '<div class="bigbtn"><div class="changeBig"></div><div class="changeSmall"></div></div>'); 
    const bigBtn = el.querySelector('.bigbtn'); 
    const changeBig = el.querySelector('.changeBig'); 
    const changeSmall = el.querySelector('.changeSmall');
    // Fügen Sie dem Popup-Fenster einen automatischen Überlauf hinzu. Andernfalls kann die Beschriftung im Feld beim Verkleinern den Dialog überschreiten. 
    dragDom.style.overflow = "auto"; 
    //Ausgewählten Header-Texteffekt löschen//dialogHeaderEl.onselectstart = new Function("return false"); 
    //Fügen Sie dem Kopf einen verschiebbaren Cursor hinzu 
    dialogHeaderEl.style.cursor = "verschieben"; 
    // Holen Sie sich die ursprünglichen Attribute, d. h. dom element.currentStyle firefox google window.getComputedStyle(dom element, null); 
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); 
    lass moveDown = (e) => {
      // Drücken Sie die Maus, um den Abstand zwischen dem aktuellen Element und dem sichtbaren Bereich zu berechnen const disX = e.clientX - dialogHeaderEl.offsetLeft; 
      const disY = e.clientY - dialogHeaderEl.offsetTop; 
      // Holen Sie sich den Wert mit dem regulären Ausdruck px, um let styL, styT zu ersetzen.
      // 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 * (+sty.left.replace(/\%/g, '') / 100); 
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
 
      } anders { 
        styL = +sty.left.replace(/\px/g, '');
        styT = +sty.top.replace(/\px/g, '');
 
      };
 
      document.onmousemove = Funktion (e) {
        // Berechnen Sie die Bewegungsdistanz durch Ereignisdelegation const l = e.clientX - disX;
        const t = e.clientY - disY; 
        // Aktuelles Element verschieben dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;
 
        //Übergebe die aktuelle Position //binding.value({x:e.pageX,y:e.pageY})
 
      };
 
      document.onmouseup = Funktion (e) { 
        Dokument.onmousemove = null; 
        Dokument.onmouseup = null;
 
      };
 
    }
 
    dialogHeaderEl.onmousedown = nach unten bewegen;
 
    //Doppelklicken Sie auf die Kopfzeile, um den Vollbildeffekt zu erzielen bigBtn.onclick = (e) => {
      wenn (isFullScreen == false) { 
        changeBig.style.display = "keine"; 
        changeSmall.style.display = "Block";
        jetztHöhe = dragDom.clientHeight;
        jetztWidth = dragDom.clientWidth; 
        jetztMarginTop = dragDom.style.marginTop; 
        dragDom.style.left = 0; 
        dragDom.style.top = 0; 
        dragDom.style.height = "100VH";
        dragDom.style.width = "100VW"; 
        dragDom.style.marginTop = 0; 
        istVollbild = wahr; 
        dialogHeaderEl.style.cursor = "initial"; 
        dialogHeaderEl.onmousedown = null;
 
      } anders {
 
        changeBig.style.display = "Block"; 
        changeSmall.style.display = "keine";
        dragDom.style.height = "auto"; 
        dragDom.style.width = aktuelleBreite + 'px'; 
        dragDom.style.marginTop = jetztMarginTop; 
        istVollbild = falsch; 
        dialogHeaderEl.style.cursor = "verschieben";
 
        dialogHeaderEl.onmousedown = nach unten bewegen;
 
      }
 
    }
 
    dragDom.onmousemove = Funktion (e) {
      // console.log(dialogHeaderEl,dragDom.querySelector('.el-dialog__body'), 123);
      sei moveE = e;
 
      wenn (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) {
         dragDom.style.cursor = "w-Größe ändern";
      } sonst wenn (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) { 
        dragDom.style.cursor = "s-Größe ändern"; 
      } anders { 
        dragDom.style.cursor = "Standard"; 
        dragDom.onmousedown = null;
 
      }
 
      dragDom.onmousedown = (e) => { 
        const clientX = e.clientX; 
        const clientY = e.clientY; 
        let elW = dragDom.clientWidth; 
        let elH = dragDom.clientHeight; 
        : Lassen Sie EloffsetLeft = dragDom.offsetLeft;
        let EloffsetTop = dragDom.offsetTop;
        dragDom.style.userSelect = "keine";
        let ELscrollTop = el.scrollTop;
 
        //Beurteilen, ob die angeklickte Position der Kopf istif (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) {
 
          //Wenn es der Header ist, wird hier keine Aktion ausgeführt. Das Obige ist an dialogHeaderEl.onmousedown = moveDown gebunden.
 
        } anders {
 
          document.onmousemove = Funktion (e) {
            e.preventDefault(); // Standardereignisse beim Verschieben deaktivieren // Linke Mauszeigerposition if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) { 
              //Nach links ziehen if (clientX > e.clientX) { 
                dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
 
              }
 
              //Nach rechts ziehen if (clientX < e.clientX) { 
                wenn (dragDom.clientWidth < minWidth) {
                } anders {
                dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
 
                }
 
              }
 
            }
 
            //Rechte Maus ziehen positionif (clientX > EloffsetLeft + elW - 10 und clientX < EloffsetLeft + elW) { 
              //Nach links ziehen if (clientX > e.clientX) {
                wenn (dragDom.clientWidth < minWidth) { 
                } anders { 
                  dragDom.style.width = elW – (ClientX – e.ClientX) * 2 + „px“;
 
                }
 
              }
 
              //Nach rechts ziehen if (clientX < e.clientX) {
 
                dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
 
              }
 
            }
 
            //Untere Mauszeigerpositionif (ELscrollTop + clientY > EloffsetTop + elH - 20 und ELscrollTop + clientY < EloffsetTop + elH) {
 
              //Nach oben ziehen if (clientY > e.clientY) {
                if (dragDom.clientHeight < minHeight) {
                } anders {
 
                  dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';
 
                }
 
              }
 
              //Nach unten ziehen if (clientY < e.clientY) { 
                dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';
 
              }
 
            }
 
          };
 
          //Streckung endet document.onmouseup = function (e) { 
            Dokument.onmousemove = null; 
            Dokument.onmouseup = null;
 
          };
 
        }
 
      }
 
    }
  }
})

importiere './utils/directives.js';

<el-dialog
     v-dialogDrag
      Titel="Benutzerinformationen"
      :visible.sync="dialogSichtbar"
      Breite="50%"
      :Schließen bei Klick-Modal="false"
      :before-close="handleClose">
      <div>
        <el-table :data="phoneData" style="width: 100%">
          <el-table-column prop="vollständigerName" label="Name" width="100"></el-table-column>
          <el-table-column prop="sex" label="Geschlecht" width="80"></el-table-column>
          <el-table-column prop="idCard" label="Ausweisnummer" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="mobile" label="Kontaktnummer" width="150"></el-table-column>
          <el-table-column prop="censusAreaName" label="Haushaltsregistrierungsabteilung" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="censusAddr" label="Registrierungsadresse des Haushalts" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="operation" width="120" fixed="rechts" align="center">
            <template slot-scope="{row}">
              <span @click="chooseInfor(row.id)" class="table-btn">Auswählen</span>
            </Vorlage>
          </el-Tabellenspalte>
        </el-Tabelle>
      </div>
</el-dialog>

.changeBig {
    Breite: 20px;
    Höhe: 20px;
    Hintergrund: URL("../assets/images/bigChange.png") keine Wiederholung Mitte;
    Hintergrundgröße: 100 % 100 %;
    Cursor: Zeiger;
    Position: absolut;
    oben: 14px;
    rechts: 60px;
}
.changeSmall {
    Breite: 20px;
    Höhe: 20px;
    Hintergrund: URL("../assets/images/smallChange.png") keine Wiederholung Mitte;
    Hintergrundgröße: 100 % 100 %;
    Cursor: Zeiger;
    Position: absolut;
    oben: 14px;
    rechts: 60px;
    Anzeige: keine;
}