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);

}
});#🎜🎜 #

<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>

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.

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!