Detaillierte Erläuterung der Verwendung der Drag & Drop-Zoom-Komponente für Vue-Bilder

<Dokument>
  Bildkomponente - Benutzer zoomt hinein, heraus und zieht</doc>
<Vorlage>
  <div Stil="Breite: 100 %;Position: relativ;Überlauf: ausgeblendet;Textausrichtung: Mitte;Rahmen: 1px durchgezogen #f1f2f3;">
    <el-button size='mini' @click="zumGroßenÄndern" icon="el-icon-zoom-in"
      style="position: absolute;oben: 2px ;links: 2px;z-index: 999;"></el-button>
    <el-button size='mini' @click="zumKleinenÄndern" icon="el-icon-zoom-out"
      Stil="Position: absolut;oben: 2px;links: 40px;z-index: 999;"></el-button>
    <img id="img" :src="src" alt="" @mousedown.prevent="dropImage" :style="{transform:'scale('+multiples+')'}">
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Requisiten: ['src'],
    Daten() {
      zurückkehren {
        Vielfache: 1,
        odiv: null,
      }
    },
    montiert() {
      dies.dropImage()
    },
    betrachten:
      src(neuerWert, alterWert) {
        dies.multiples = 1
        wenn (this.odiv !== null) {
          dies.odiv.style.left = "0px";
          dies.odiv.style.top = "0px";
        }
      },
    },
    Methoden: {
      zuGroßeÄnderung() {
        wenn (dieses.multiples >= 2) {
          zurückkehren;
        }
        dies.multiples += 0,25;
      },
      //Auf Kleingeld verkleinern() {
        wenn (dieses.multiples <= 1) {
          zurückkehren;
        }
        dies.multiples -= 0,25;
      },
      // ziehen dropImage(e) {
        wenn (e === null) {
          zurückkehren
        }
        this.odiv = e.target; //Zielelement abrufen //Position der Maus relativ zum Element berechnen let disX = e.clientX - this.odiv.offsetLeft;
        lass disY = e.clientY - this.odiv.offsetTop;
        document.onmousemove = (e) => { //Maus gedrückt und bewegt-Ereignis //Subtrahiere die Position der Maus relativ zum Element von der Position der Maus, um die Position des Elements zu erhalten let left = e.clientX - disX;
          let top = e.clientY - disY;

          //Binde die Elementposition an PositionX und PositionY this.positionX = top;
          diese.positionY = links;

          //Verschiebe das aktuelle Element this.odiv.style.left = left + 'px';
          dies.odiv.style.top = oben + "px";
        };
        document.onmouseup = (e) => {
          Dokument.onmousemove = null;
          Dokument.onmouseup = null;
        };
      },
    }
  }
</Skript>
<Stilbereich>
  img {
    Breite: 100 %;
    Position: relativ;
  }
</Stil>