当你想用vue-touch时，却发现官网这句话
但是却找不到好的替换方案，只能自己硬着头皮上了。
我这边有一个不成熟的解决方案：
自己写v-touch指令
长按 press，向上 swipeup，向下 swipedown，向左swipeleft，向右 swiperight
使用 v-touch:swiperight="methodFunc"。
vue指令 touch 使用bind，
- binding.arg 获得传入模式
- el 监听绑定的事件
- binding.value 获得传入的事件
通过对touchstart touchmove touchend 的判断，执行对应的事件。
main.js 引用
import Vue from 'vue' import directives from './directives'
...
directives(Vue)
directives.js
export default(Vue) => {
Vue.directive('touch', {
bind: function (el, binding, vnode) {
var touchType = binding.arg; //传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap
var timeOutEvent = 0;
var direction = '';
//滑动处理
var startX, startY;
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑动距离太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 'swiperight';
} else if (angle >= 45 && angle < 135) {
result = 'swipeup';
} else if (angle >= -135 && angle < -45) {
result = 'swipedown';
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 'swipeleft';
}
return result;
}
el.addEventListener('touchstart', function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
//判断长按
timeOutEvent = setTimeout(() =>{
timeOutEvent = 0 ;
if(touchType === 'press'){
binding.value()
}
} , 500);
}, false);
el.addEventListener('touchmove' , function (ev) {
clearTimeout(timeOutEvent)
timeOutEvent = 0;
});
el.addEventListener('touchend', function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
direction = GetSlideDirection(startX, startY, endX, endY);
clearTimeout(timeOutEvent)
switch (direction) {
case 0:
break;
case 'swipeup':
if(touchType === 'swipeup'){
binding.value()
}
break;
case 'swipedown':
if(touchType === 'swipedown'){
binding.value()
}
break;
case 'swipeleft':
if(touchType === 'swipeleft'){
binding.value()
}
break;
case 'swiperight':
if(touchType === 'swiperight'){
binding.value()
}
break;
default:
}
}, false);
}
})
}以上方案还有待完善，但是对于遇到vue2.0想使用移动端事件，这个方案还是可以顶替的。