import Vue from 'vue'
/* 声明构造函数 */
function vueTouch(el, binding, type) {//触屏函数
var _ = this;
_.obj = el;
_.binding = binding;
_.touchType = type;
_.vueTouches = { x: 0, y: 0 };//触屏坐标
_.vueMoves = true;
_.vueLeave = true;
_.vueCallBack = typeof (binding.value) == "object" ? binding.value.fn : binding.value;
_.obj.addEventListener("touchstart", function (e) {
_.start(e);
}, false);
_.obj.addEventListener("touchend", function (e) {
_.end(e);
}, false);
_.obj.addEventListener("touchmove", function (e) {
_.move(e);
}, false);
};
vueTouch.prototype = {
start: function (e) {//监听touchstart事件
this.vueMoves = true;
this.vueLeave = true;
this.longTouch = true;
this.vueTouches = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
this.time = setTimeout(function () {
if (this.vueLeave && this.vueMoves) {
this.touchType == "longtap" && this.vueCallBack(this.binding.value, e);
this.longTouch = false;
};
}.bind(this), 1000);
},
end: function (e) {//监听touchend事件
var disX = e.changedTouches[0].pageX - this.vueTouches.x;//计算移动的位移差
var disY = e.changedTouches[0].pageY - this.vueTouches.y;
clearTimeout(this.time);
if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {//当横向位移大于10,纵向位移大于100,则判定为滑动事件
this.touchType == "swipe" && this.vueCallBack(this.binding.value, e);//若为滑动事件则返回
if (Math.abs(disX) > Math.abs(disY)) {//判断是横向滑动还是纵向滑动
if (disX > 10) {
this.touchType == "swiperight" && this.vueCallBack(this.binding.value, e);//右滑
};
if (disX < -10) {
this.touchType == "swipeleft" && this.vueCallBack(this.binding.value, e);//左滑
};
} else {
if (disY > 10) {
this.touchType == "swipedown" && this.vueCallBack(this.binding.value, e);//下滑
};
if (disY < -10) {
this.touchType == "swipeup" && this.vueCallBack(this.binding.value, e);//上滑
};
};
} else {
if (this.longTouch && this.vueMoves) {
this.touchType == "tap" && this.vueCallBack(this.binding.value, e);
this.vueLeave = false
};
};
},
move: function (e) {//监听touchmove事件
this.vueMoves = false;
}
};
Vue.directive("tap", {//点击事件
bind: function (el, binding) {
new vueTouch(el, binding, "tap");
}
});
Vue.directive("swipe", {//滑动事件
bind: function (el, binding) {
new vueTouch(el, binding, "swipe");
}
});
Vue.directive("swipeleft", {//左滑事件
bind: function (el, binding) {
new vueTouch(el, binding, "swipeleft");
}
});
Vue.directive("swiperight", {//右滑事件
bind: function (el, binding) {
new vueTouch(el, binding, "swiperight");
}
});
Vue.directive("swipedown", {//下滑事件
bind: function (el, binding) {
new vueTouch(el, binding, "swipedown");
}
});
Vue.directive("swipeup", {//上滑事件
bind: function (el, binding) {
new vueTouch(el, binding, "swipeup");
}
});
Vue.directive("longtap", {//长按事件
bind: function (el, binding) {
new vueTouch(el, binding, "longtap");
}
});
export default vueTouch;
将上述代码保存为direct.js文件并放入公共文件中,在组件中调用时,给元素身上绑定指令
<div
class="bot_cont"
v-tap="vuetouch"
v-swipeleft="{fn:vuetouch,name:'左滑'}"
v-swiperight="{fn:vuetouch,name:'右滑'}"
ref="remove"
:class="slideOpen?'slideleft':''"
>
vuetouch是函数名返回两个参数,这是我做的滑动时图标切换处理
// 滑动事件
vuetouch(s, e) {
let status = s.name,
_ = this;
let remove = _.$refs.remove;
if (status == "左滑") {
_.slide = "images/a5.png";
_.slideOpen = true;
} else if (status == "右滑") {
_.slide = "images/a4.png";
_.slideOpen = false;
}
},