Vue中的移动端事件插件vue-touch详解
作者：yuanliy
文章介绍了vue-touch库,它提供了单击、双击、长按、缩放等手势事件,通过npm安装后,开发者可以在Vue项目中使用这些手势事件,文章还分享了使用vue-touch的基本方法,并鼓励读者参考和支持脚本之家
Vue移动端事件插件vue-touch
vue-touch包括单击、双击、长按、缩放等手势事件
npm安装
npm install vue-touch@next --save
//main.js中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
用法如下：
//html代码
<template>
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<div class="menu-container" ref="menuContainer">
<!-- 这个是内容 -->
</div>
</v-touch>
</template>
- js：
export default {
name: 'Queue',
data () {
return {
}
},
methods: {
swiperleft: function () {
console.log("左划")
},
swiperright: function () {
console.log("右滑")
}
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。