Tutorial zur Vue-Gestenkomponente

Vorwort

In letzter Zeit muss ich die Gestenbedienung zum Kneifen und Erweitern mit den Fingern verwenden, aber sie sind entweder nicht für Vue geeignet oder Die Größe ist zu groß. Ich habe mich entschieden, mit Ihren eigenen Handschriftgesten zu arbeiten.

Idee

Binden Sie touchstart, touchmove, touchend direkt an das DOM. Sie müssen diese Ereignisse nicht nur binden, sondern es ist auch schwierig, sie in anderen wiederzuverwenden Projekte. Daher ist es sinnvoller, benutzerdefinierte Vue-Anweisungen zu verwenden. Die Anweisungen können auch in Plug-Ins gekapselt und dann mit npm gehostet werden, sodass sie jederzeit und überall verwendet werden können.

Benutzerdefinierte Vue-Anweisungen

Die offizielle Website von Vue bietet ein Tutorial zu benutzerdefinierten Anweisungen, in dem die von uns benötigten Schlüsselcodes extrahiert werden.

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

  }
})复制代码

Multi-Touch

Um die Pinch-Geste zu realisieren, muss sie mit mehreren Fingern bedient werden. Mit dem Multi-Touch von touch können Sie also die Position mehrerer Berührungspunkte ermitteln . Durch Beurteilung der Abstandsabweichung zwischen den beiden Punkten touchstart und touchend können Sie dann feststellen, ob es sich um eine Pinch-Geste oder eine Vergrößerungsgeste handelt. Der Schlüsselcode lautet wie folgt:

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');
        }
    }
});复制代码

Verwenden Sie den Befehl

, um benutzerdefinierte Befehle mit Gestenlogik zu schreiben, und Sie können ihn direkt verwenden.

<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('扩大');
          }
      }
  }
})复制代码

Zusammenfassung

Die Verwendung benutzerdefinierter Vue-Anweisungen zum Abschließen von Gestenoperationen ist nicht kompliziert, und die Kapselung der Logik in Komponenten ist sehr einfach.

Komponenten-Quellcode

Klicken Sie hier, um den vollständigen Quellcode anzuzeigen.

Verwenden Sie diese Komponente

Wenn diese Komponente für Sie hilfreich ist, können Sie sie über npm installieren:

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

Weitere Komponenten

create- picture: This Die Komponente bietet Funktionen zum Zeichnen von Leinwandbildern und zum Zeichnen von Texten, verwendet synchrone Syntax, um das asynchrone Zeichnen abzuschließen, und vereinfacht die native Syntax für Leinwandzeichnungen.

Empfohlenes Tutorial: „JS-Tutorial“

Das obige ist der detaillierte Inhalt vonTutorial zur Vue-Gestenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!