Vue implémente la largeur du contrôle du glissement de la souris

Vue.js est un framework JavaScript populaire. Ce n'est pas seulement un framework, mais aussi une bibliothèque très flexible et puissante. Le framework permet aux développeurs d'implémenter efficacement des applications frontales. Dans cet article, nous présenterons comment utiliser Vue.js pour implémenter le contrôle de la largeur par glissement de la souris.

L'implémentation du glisser-déplacer de la souris pour contrôler la largeur est une interaction courante dans de nombreuses applications Web, comme faire glisser une barre de bordure ou un curseur pour redimensionner un conteneur ou redimensionner une image. La partie la plus basique de l'interface utilisateur de cette interaction est un élément déplaçable et un conteneur comme élément cible. Dans Vue.js, nous utilisons des directives et des gestionnaires d'événements pour implémenter le glisser-déposer.

La première étape consiste à définir une commande qui déclenche le glisser dans l'instance Vue. La directive "v-draggable" doit être liée à l'élément drag. Cette directive est enregistrée en tant que composant global ou local à l'aide de l'API de directive personnalisée Vue.

Vue.directive('draggable', {
bind(el, contraignant, 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);

}
});

Dans la directive, nous définissons un événement mouse down (mousedown). Nous lions l'événement à l'élément de liaison (el) de la directive. Une fois l'événement déclenché, nous enregistrons le décalage de la souris par rapport à l'élément afin de pouvoir calculer la nouvelle position de l'élément lors du glissement. Nous calculons ensuite le décalage dans l'événement mousemove, déterminons la nouvelle largeur et la lions à l'instance Vue.

Enfin, nous lions l'événement mouseup (mouseup) à l'objet document afin que l'événement mouseup puisse toujours être détecté après que l'utilisateur quitte la zone de glisser, et effaçons les écouteurs pour les événements mousemove et mouseup.

Ensuite, nous utilisons la directive « v-draggable » pour lier l'élément glisser à la propriété data du composant Vue.

Vue.component('resizing', {
modèle : `

<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,
};

},
}) ;

Dans cet exemple, nous créons un composant React "Resizing". Il se compose d'une zone déplaçable et d'un conteneur. Nous utilisons la directive v-draggable pour lier l'élément glisser à une valeur de largeur, et l'élément est ajouté à un conteneur de classe "drag-area".

Enfin, nous rendons le composant dans le DOM.

new Vue({
el: '#app',
});

De cette façon, nous utilisons avec succès Vue.js pour implémenter le glisser-déposer de la souris pour contrôler la largeur de l'élément déplacé. Vue.js offre beaucoup de flexibilité et d'extensibilité, ce qui rend le développement de ce type d'interaction très simple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!