如何手 Vue的手势组件呢？本文教你

矫情吗；* 2023-02-17 03:48 24阅读 0赞

# 前言 #

最近需要使用手指捏合扩大的手势操作，找了几个组件，要么对 Vue 适配不好，要么量级太大，决定自己手写手势操作。

### 项目与效果预览 ###

![format_png][]

## 思路 ##

直接在 DOM 上绑定 `touchstart` 、`touchmove`、`touchend` 不仅要绑定这几个事件，而且用在其他项目还不好复用。所以用 Vue 自定义指令比较合适，指令还可以封装成插件，再使用 `npm` 托管，这样随时随地都可以使用了。

### Vue 自定义指令 ###

Vue 官网就有 [自定义指令][Link 1] 的教程，摘取我们需要的关键代码。

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

### 多点触控 ###

实现捏合手势，必然是多根手指操作，因此使用 `touch` 的多点触控，就可以拿到多个触控点的位置了。再通过判断两点 `touchstart` 与 `touchend` 前的距离偏差，就可以判断出是捏合手势，还是放大手势了。关键代码如下：

### 使用指令 ###

手势逻辑写入自定义指令，就可以直接使用了。

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

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

## 总结 ##

使用 Vue 自定义指令完成手势操作并不复杂，同时将该逻辑封装成组件量级很轻。

### 组件源码 ###

[点此][Link 2] 查看完整源码。

### 使用该组件 ###

如果该组件对你有所帮助，可以通过 [npm][] 的方式进行安装：

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

### 更多组件 ###

[create-picture][]：该组件提供了 canvas 的图片绘制与文本绘制功能，使用同步的语法完成异步绘制，简化原生 canvas 绘制语法。记住：我是08年出道的高级前端老鸟，有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦

本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC82LzExLzE3MmExODIyMGY2NzBjODE?x-oss-process=image/format,png
[Link 1]: https://cn.vuejs.org/v2/guide/custom-directive.html
[Link 2]: https://github.com/NalvyBoo/vue-pinch
[npm]: https://www.npmjs.com/package/vue-pinch
[create-picture]: https://github.com/NalvyBoo/create-picture