vue移动端项目中有一个需求是图片双击放大,在网上查了好多,都是说用 @dblclick="Ondblclick",结果发现在pc端,安卓微信端确实有效,但是ios和chrome device中事件不触发。今天突然发现了vue的手势插件:vue-touch,可以自定义双击事件,在ios和chrome亲测有效。
注意: vue1.0可以直接使用vue-touch,但是vue2.0要安装:vue-touch@next。具体步骤如下:
1.下载vue-touch:npm install vue-touch@next
2.在mian.js中导入:import VueTouch from 'vue-touch'
3.自定义双击事件:
VueTouch.registerCustomEvent('doubletap', {
type: 'tap',
taps: 2
})
4.在vue中引用:Vue.use(VueTouch, {name: 'v-touch'})
5.在组件(页面)中使用:<v-touch v-on:doubletap="Ondouble"></v-touch>
6.js中:methods: {
Ondouble(){
console.log("双击")
}
}