Vue implementiert die Breite der Mausziehsteuerung

Vue.js ist ein beliebtes JavaScript-Framework. Es ist nicht nur ein Framework, sondern auch eine sehr flexible und leistungsstarke Bibliothek. Das Framework ermöglicht Entwicklern die effiziente Implementierung von Frontend-Anwendungen. In diesem Artikel stellen wir vor, wie Sie mit Vue.js die Breitensteuerung durch Mausziehen implementieren.

Das Implementieren des Mausziehens zur Steuerung der Breite ist in vielen Webanwendungen eine häufige Interaktion, z. B. das Ziehen einer Randleiste oder eines Schiebereglers, um die Größe eines Containers oder eines Bildes zu ändern. Der grundlegendste UI-Teil dieser Interaktion ist ein ziehbares Element und ein Container als Zielelement. In Vue.js verwenden wir Direktiven und Event-Handler, um Drag & Drop zu implementieren.

Der erste Schritt besteht darin, eine Anweisung zu definieren, die das Ziehen in der Vue-Instanz auslöst. Die „v-draggable“-Direktive muss an das Drag-Element gebunden werden. Diese Direktive wird mithilfe der benutzerdefinierten Direktiven-API von Vue als globale oder lokale Komponente registriert.

Vue.directive('draggable', {
bind(el, binding, vnode) {

  let xOffset = 0;
  let yOffset = 0;

  const handleMouseDown = (event) => {
      if (!event.target.classList.contains('drag-handle')) {
          return;
      }

      xOffset = event.clientX;
      yOffset = event.clientY;

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (event) => {
      const currentX = event.clientX;
      const currentY = event.clientY;

      const dx = currentX - xOffset;
      const dy = currentY - yOffset;

      const newWidth = el.offsetWidth + dx;

      vnode.context[binding.expression] = newWidth;
  };

  const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
  };

  el.querySelector('.drag-handle').addEventListener('mousedown', handleMouseDown);

}
});#🎜🎜 #

Im Befehl definieren wir ein Mousedown-Ereignis (Mousedown). Wir binden das Ereignis an das Bindungselement (el) der Direktive. Nachdem das Ereignis ausgelöst wurde, zeichnen wir den Mausversatz relativ zum Element auf, damit wir beim Ziehen die neue Position des Elements berechnen können. Anschließend berechnen wir den Offset im Mousemove-Ereignis, ermitteln die neue Breite und binden sie in die Vue-Instanz ein.

Abschließend binden wir das Mouseup-Ereignis (Mouseup) an das Dokumentobjekt, sodass das Mouseup-Ereignis weiterhin erkannt werden kann, nachdem der Benutzer den Ziehbereich verlassen hat, und die Mausbewegungs- und Mouseup-Ereignisse gelöscht werden ein Ereignis-Listener.

Als nächstes verwenden wir die „v-draggable“-Direktive, um das Drag-Element an die Dateneigenschaft der Vue-Komponente zu binden.

4883ec0eb33c31828b7c767c806e14c7

d1e062c00b82b4850bb5e4d5394a595fDrag Me16b28748ea4df4d9c2150843fecfba68
c21078c6e76e0de1cfffc0d21e16253316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Vue.component('resizable', {# 🎜🎜# Vorlage: `

<div class="resizable">
  <div class="wrapper">
    <div class="panel-a">
      <div v-draggable="width" class="drag-area">
        <div class="drag-handle"></div>
      </div>
    </div>
    <div class="panel-b" :style="{ width: width + 'px' }"></div>
  </div>
</div>

`,

data() {

return {
  width: 400,
};

},

});

#🎜🎜 #In diesem Beispiel erstellen wir eine React-Komponente „Resizable“. Es besteht aus einem verschiebbaren Bereich und einem Container. Wir verwenden die v-draggable-Direktive, um das Drag-Element an einen Breitenwert zu binden, und das Element wird einem Container der Klasse „drag-area“ hinzugefügt.

Zuletzt rendern wir die Komponente in das DOM.

new Vue({

el: '#app',

});

Auf diese Weise nutzen wir Vue.js erfolgreich zur Mausimplementierung Drag & Drop Steuert die Breite des gezogenen Elements. Vue.js bietet viel Flexibilität und Erweiterbarkeit, was die Entwicklung dieser Art von Interaktion sehr einfach macht.

Das obige ist der detaillierte Inhalt vonVue implementiert die Breite der Mausziehsteuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!