安装依赖和引入组件

使用npm安装vue-directive-touch组件

npm install vue-directive-touch --save

在main.js中引入vue-directive-touch

import touch from 'vue-directive-touch'
Vue.use(touch);  

实际应用

长按事件

模板

<template> 
  <div v-touch:long="onLongTouch">
  </div> 
</template>  

事件

methods: { 
    onLongTouch () { 
        this.$message.success('已复制该文案')
    } 
}  

左滑事件

模板

<template> 
  <div v-touch:left="onLeftTouch">
  </div> 
</template>  

事件

methods: { 
    onLeftTouch () { 
        this.$message.success('切换至下一页')
    } 
}  

可支持的事件类型(6个)

1. 单击： v-touch:tap
2. 长按： v-touch:long
3. 左滑： v-touch:left
4. 右滑： v-touch:right
5. 上滑： v-touch:up
6. 下滑： v-touch:down