Tutoriel sur les composants de geste Vue

Avant-propos

Récemment, j'ai besoin d'utiliser l'opération gestuelle de pincement et d'expansion avec les doigts. J'ai trouvé plusieurs composants, mais ils ne conviennent pas à Vue ou. l'ampleur est trop grande. J'ai décidé d'opérer avec vos propres gestes d'écriture.

Idée

Lier touchstart, touchmove, touchend directement sur le DOM Non seulement vous devez lier ces événements, mais il est également difficile de les réutiliser dans d'autres. projets. Par conséquent, il est plus approprié d'utiliser des instructions personnalisées Vue. Les instructions peuvent également être encapsulées dans des plug-ins puis hébergées à l'aide de npm afin qu'elles puissent être utilisées à tout moment et n'importe où.

Instructions personnalisées Vue

Le site officiel de Vue propose un didacticiel sur les instructions personnalisées, extrayant les codes clés dont nous avons besoin.

Vue.directive('pinch', {  // 只调用一次，指令第一次绑定到元素时调用
  bind (el, binding)  {    // el：指令所绑定的元素，可以用来直接操作 DOM
    // binding.value()：运行添加到指令的回调方法

  }
})复制代码

Multi-touch

Pour réaliser le geste de pincement, il doit être actionné par plusieurs doigts, donc en utilisant le multi-touch de touch, vous pouvez obtenir l'emplacement de plusieurs points de contact . Ensuite en jugeant l'écart de distance entre les deux points touchstart et touchend, vous pourrez déterminer s'il s'agit d'un geste de pincement ou d'un geste d'agrandissement. Le code clé est le suivant :

let touchFlag = false;let touchInitSpacing = 0;let touchNowSpacing = 0;

el.addEventListener('touchstart',(e)=>{    if(e.touches.length>1){
        touchFlag = true;
        touchInitSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }else{
        touchFlag = false;
    }
});

                
el.addEventListener('touchmove',(e)=>{    if(e.touches.length>1&&touchFlag){
        touchNowSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }
});

el.addEventListener('touchend',()=>{    if(touchFlag){
        touchFlag = false;        if(touchInitSpacing-touchNowSpacing>0){
            binding.value('pinchin');
        }else{
            binding.value('pinchout');
        }
    }
});复制代码

Utilisez la commande

pour écrire des commandes personnalisées avec une logique gestuelle, et vous pouvez l'utiliser directement.

<template>
    <p class="pinch" v-pinch="pinchCtrl"></p></template>复制代码

new Vue({  methods: {      pinchCtrl: function (e) {        
          if(e==='pinchin'){              console.log('捏合')
          }          if(e==='pinchout'){              console.log('扩大');
          }
      }
  }
})复制代码

Résumé

Utiliser des instructions personnalisées Vue pour effectuer des opérations gestuelles n'est pas compliqué, et encapsuler la logique dans des composants est très léger.

Code source du composant

Cliquez ici pour voir le code source complet.

Utilisez ce composant

Si ce composant vous est utile, vous pouvez l'installer via npm :

npm i vue-pinch --save复制代码

Plus de composants

create-picture : Ceci Le composant fournit des fonctions de dessin d'image sur toile et de dessin de texte, utilise une syntaxe synchrone pour réaliser un dessin asynchrone et simplifie la syntaxe native de dessin sur toile.

Tutoriel recommandé : "Tutoriel JS"

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!