最近需要使用手指捏合扩大的手势操作，找了几个组件，要么对 Vue 适配不好，要么量级太大，决定自己手写手势操作。
直接在 DOM 上绑定touchstart、touchmove、touchend不仅要绑定这几个事件，而且用在其他项目还不好复用。所以用 Vue 自定义指令比较合适，指令还可以封装成插件，再使用npm托管，这样随时随地都可以使用了。
Vue 官网就有 自定义指令 的教程，摘取我们需要的关键代码。
Vue.directive('pinch', { // 只调用一次，指令第一次绑定到元素时调用 bind (el, binding) { // el：指令所绑定的元素，可以用来直接操作 DOM // binding.value()：运行添加到指令的回调方法 } })复制代码
实现捏合手势，必然是多根手指操作，因此使用touch的多点触控，就可以拿到多个触控点的位置了。再通过判断两点touchstart与touchend前的距离偏差，就可以判断出是捏合手势，还是放大手势了。关键代码如下：
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'); } } });复制代码
手势逻辑写入自定义指令，就可以直接使用了。
复制代码
new Vue({ methods: { pinchCtrl: function (e) { if(e==='pinchin'){ console.log('捏合') } if(e==='pinchout'){ console.log('扩大'); } } } })复制代码
使用 Vue 自定义指令完成手势操作并不复杂，同时将该逻辑封装成组件量级很轻。
点此 查看完整源码。
如果该组件对你有所帮助，可以通过 npm 的方式进行安装：
npm i vue-pinch --save复制代码
create-picture：该组件提供了 canvas 的图片绘制与文本绘制功能，使用同步的语法完成异步绘制，简化原生 canvas 绘制语法。
推荐教程：《JS教程》
Das obige ist der detaillierte Inhalt vonVue 手势组件教程. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Warum meldet vue.js einen Fehler?
Wozu dienen vue.js-Slots?
So springen Sie mit Parametern in vue.js
Was macht Python?
So lösen Sie das Problem, wenn die CPU-Temperatur des Computers zu hoch ist
Nutzung des DWZ-Frameworks
Einführung in die Beziehung zwischen PHP und Frontend
So konfigurieren Sie JDK-Umgebungsvariablen
