vue中如何使用AlloyFinger

亲测有效！！！！

AlloyFinger 是由腾讯前端团队 AlloyTeam 出品的一个小巧轻量级的移动端手势库，整个手势库的代码不超过400行，却支持绝大多数的手势操作，能够满足日常的开发需求。AlloyFinger传送门（github）： AlloyFinger。

JavaScript 移动端触摸事件

手机移动端浏览器提供了4种触摸事件：touchstart，touchmove，touchend，touchcancel，分别对应的是手指触点刚接触屏幕时触发事件，手指触点在屏幕上移动时触发事件，手指触点移开屏幕时触发事件以及被系统中断时触发事件（按 Home 键返回主屏等操作）。

这里要说明下，移动端浏览器也支持部分 PC 端带有的事件，比如 click 事件。但是在移动端上，click 事件会存在延时触发的情况，大概延时300ms。

如何使用

AlloyFinger 的使用方式非常简单，源码中暴露出了一个全局的 AlloyFinger 构造函数对象，使用方式如下，返回值是一个 AlloyFinger 实例对象。

Install

npm install alloyfinger

在使用的vue页面 引入 

import AlloyFinger from 'alloyfinger'

在页面挂载时创建实例：

    mounted(){
      new AlloyFinger(this.$refs.myImg,{
      pinch:(e)=> {
        this.a = this.initA * e.scale;
      },
      multipointStart:()=> {
        this.initA = this.a;//记录下放大的倍数，在此基础上放大缩小
      }
    });
    },

data内设置初始值：

    data() {
      return {
        a: 1,
        initA: 1
      };
    },

这里，我是为了设置图片的放缩：

 <img ref="myImg" :style="{transform: `scale(${a})`}" src="../assets/logo.png" alt="" />

a 表示放缩比例，根据scale来做到放大缩小；