So entfernen Sie Aufkleber in Vue

Das Erstellen von Webanwendungen auf Basis von vue.js ist für immer mehr Front-End-Entwickler zur Wahl geworden. Auch die Implementierung der Sticker-Funktion ist zu einem wichtigen Bestandteil vieler sozialer Anwendungen geworden. Wie implementiert man im Technologie-Stack von vue.js die Sticker-Funktion? Dieser Artikel gibt eine detaillierte Einführung in die Methode zur Implementierung von Aufklebern in vue.js.

1. Materialien vorbereiten

Um die Sticker-Funktion in vue.js zu implementieren, müssen Sie relevante Materialien vorbereiten. Das heißt, der Ordner, der Aufkleberbilder und zugehörige Datendateien (z. B. Aufklebername, Standort usw.) enthält. Hier können wir require.ensure verwenden, um Materialdateien asynchron zu laden, sodass die Anwendung schnell auf Benutzervorgänge reagieren und die Ladezeit der Seite verkürzen kann.

2. Aufkleber anzeigen

Um Aufkleber in vue.js anzuzeigen, müssen wir die Rendering-Funktion von vue.js verwenden, um der Seite Aufkleberelemente hinzuzufügen. Auf dieser Basis können wir interaktive Effekte wie das Ziehen und Zoomen von Aufklebern erzielen, indem wir die Mausereignisse des Benutzers überwachen.

1. Aufkleber rendern

In der Rendering-Funktion von vue.js können wir das Aufkleber-Array durch die V-For-Anweisung durchlaufen und jeden Aufkleber auf der Seite rendern.

render(h) {
  return h('div', {
    class: 'sticker-wrapper',
  },
  this.$store.state.stickers.map(sticker => {
    return h('img', {
      class: 'sticker',
      style: {
        top: `${sticker.y}px`,
        left: `${sticker.x}px`,
        width: `${sticker.width}px`,
      },
      domProps: {
        src: sticker.src,
      },
      on: {
        mousedown: (event) => {
          this.dragSticker(event, sticker);
        },
      },
    });
  }));
}

2. Ziehen von Aufklebern

Durch das Abhören von Mausereignissen können wir den Zieheffekt von Aufklebern erzielen.

dragSticker(event, sticker) {
  this.selectedSticker = sticker;
  this.dragging = true;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  window.addEventListener('mousemove', this.moveSticker);
  window.addEventListener('mouseup', this.finishDrag);
},
moveSticker(event) {
  if (!this.dragging || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  this.selectedSticker.x = this.stickerStartX + deltaX;
  this.selectedSticker.y = this.stickerStartY + deltaY;
},
finishDrag() {
  this.dragging = false;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.moveSticker);
  window.removeEventListener('mouseup', this.finishDrag);
},

3. Sticker-Skalierung

Ähnlich wie beim Drag-and-Drop-Effekt können wir auch die Stickergröße dynamisch anpassen, indem wir auf Mausereignisse des Benutzers hören.

resizeSticker(event, sticker, handle) {
  this.selectedSticker = sticker;
  event.stopPropagation();
  this.resizing = handle;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  this.stickerWidth = sticker.width;
  window.addEventListener('mousemove', this.handleResize);
  window.addEventListener('mouseup', this.finishResize);
},
handleResize(event) {
  if (!this.resizing || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  const scale = Math.min(Math.abs(deltaX), Math.abs(deltaY));
  if (this.resizing === 'nw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'ne') {
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth + scale;
  } else if (this.resizing === 'sw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'se') {
    this.selectedSticker.width = this.stickerWidth + scale;
  }
},
finishResize() {
  this.resizing = null;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.handleResize);
  window.removeEventListener('mouseup', this.finishResize);
},

3. Aufkleberstandortinformationen speichern

Damit Benutzer beim nächsten Öffnen der Anwendung die Standortinformationen früherer Aufkleber erhalten, können wir das Aufkleberarray im globalen Status von Vuex speichern und Änderungen an Aufkleberdaten verwalten vuex.

mutations: {
  addSticker(state, newSticker) {
    state.stickers.push(newSticker);
  },
  removeSticker(state, sticker) {
    state.stickers.splice(state.stickers.indexOf(sticker), 1);
  },
  updateSticker(state, payload) {
    const sticker = payload.sticker;
    if (payload.prop === 'x') {
      sticker.x = payload.value;
    } else if (payload.prop === 'y') {
      sticker.y = payload.value;
    } else if (payload.prop === 'width') {
      sticker.width = payload.value;
    }
  },
},

Durch die Kombination der in vuex verwalteten Daten mit den berechneten Eigenschaften der Komponente können wir problemlos eine bidirektionale Datenbindung erreichen.

computed: {
  ...mapState(['stickers']),
},

4. Zusammenfassung

Durch die Rendering-Funktion von vue.js und die Datenverwaltung von vuex können wir den interaktiven Effekt der Aufkleberfunktion einfach realisieren und die Aufkleberpositionsinformationen im globalen Zustand speichern, um das nächste Öffnen zu erleichtern der Anwendung, um die Standortinformationen des Aufklebers wiederherzustellen. Gleichzeitig müssen wir darauf achten, Probleme wie überlappende Aufkleber und das Weglaufen von Aufklebern über den Bildschirm zu vermeiden, um das Benutzererlebnis zu verbessern.

Das obige ist der detaillierte Inhalt vonSo entfernen Sie Aufkleber in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!