如题 在h5页面尝试过程中发现移动端的touchend触摸结束无法正常生效,故而寻找了插件自定义了vue指令已实现需求效果
首先在项目中安装如下插件
npm i hammer.js --save
vue 自定义指令不必多说
在项目中定义xxx.js文件,在文件中引入hammer.js
import Hammer from 'hammerjs'
然后写对应的逻辑代码 xxx.js全部代码如下
import Hammer from 'hammerjs'
function vueToch(el, type, binding) {
this.el = el;
this.type = type;
this.binding = binding;
var hammertime = new Hammer(this.el);
hammertime.on(this.type, this.binding.value)
}
export default {
install(Vue) {
//长按
Vue.directive('touch_press', {
inserted: function (el, binding) {
new vueToch(el, 'press', binding)
}
})
//长按结束
Vue.directive('touch_pressup', {
inserted: function (el, binding) {
new vueToch(el, 'pressup', binding);
}
})
//左划
Vue.directive('touch_swipeleft', {
inserted(el, binding) {
let timer = null;
if (timer == null) {
new vueToch(el, 'swipeleft', binding)
timer = setTimeout(() => timer = null, 1000)
}
}
})
//右划
Vue.directive('touch_swiperight', {
inserted(el, binding) {
let timer = null;
if (timer == null) {
new vueToch(el, 'swiperight', binding)
timer = setTimeout(() => timer = null, 1000)
}
}
})
}
}
定义了自定义指令就需要在main.js进行引入,引入代码如下(此为自己本地的路径 具体路径看xxx.js新建在何处)
import myDierctive from './utils/touch.js'
Vue.use(myDierctive)
全局注册了指令便可以使用了 使用和普通vue指令一样。本封装方法指令的绑定的是处理事件的方法
v-xxx="处理事件的方法"
hammer.js 扩展
事件 | 解释 |
---|---|
tap | 点击 |
press | 按住 |
pressup | 按住抬起 |
pan | 平移 |
panstart | 拖动开始 |
panend | 拖动结束 |
pancancel | 拖动取消 |
panleft | 向左移动 |
panright | 向右移动 |
panup | 向上拖动 |
pandown | 向下拖动 |
swipe | 快速滑动 |
swipeleft | 向左滑动 |
swiperight | 向右滑动 |
swipeup | 向上滑动 |
swipedown | 向下滑动 |
pinch | 捏拿缩放 |
pinchstart | 多点触控开始 |
pinchend | 多点触控结束 |
pinchcancel | 多点触控取消 |
pinchin | 多点触控时两手指越来越近 |
pinchout | 多点触控时两手指越来越远 |
rotate | 旋转 |
rotatestart | 旋转开始 |
rotatemove | 旋转过程 |
rotateend | 旋转结束 |
rotatecancel | 旋转取消 |