共计 1624 个字符，预计需要花费 5 分钟才能阅读完成。
不废话，间接上代码：
- 目录构造
此目录构造只是将 vue 指令独自创立文件夹对立治理，同一注册。使用者可依据本人我的项目适当批改。
- 指令代码：longpress.js
export default {
name: "longpress", // 指令名
instance: {bind(el, binding, vnode) {let isiOS = /iphone/gi.test(navigator.userAgent);
const iosUnable = binding.value.iosUnable || false;
if (isiOS && iosUnable) {return;}
var timer = null;
vnode.start = function(e) {
// 如果是点击事件，不启动计时器，间接返回
if (e.type === "click") {return;}
if (timer == null) {// 创立定时器 ( value.time ms 之后执行长按性能函数)
timer = setTimeout(function() {
// 执行长按性能函数
binding.value.cb();}, binding.value.time);
}
};
vnode.cancel = function() {if (timer !== null) {clearTimeout(timer);
timer = null;
}
};
// 增加事件监听器
el.addEventListener("mousedown", vnode.start);
el.addEventListener("touchstart", vnode.start);
// 勾销计时器
el.addEventListener("click", vnode.cancel);
el.addEventListener("touchmove", vnode.cancel);
el.addEventListener("mouseout", vnode.cancel);
el.addEventListener("touchend", vnode.cancel);
el.addEventListener("touchcancel", vnode.cancel);
},
unbind(el, binding, vnode) {
// 增加事件监听器
el.removeEventListener("mousedown", vnode.start);
el.removeEventListener("touchstart", vnode.start);
// 勾销计时器
el.removeEventListener("click", vnode.cancel);
el.removeEventListener("touchmove", vnode.cancel);
el.removeEventListener("mouseout", vnode.cancel);
el.removeEventListener("touchend", vnode.cancel);
el.removeEventListener("touchcancel", vnode.cancel);
}
}
};
- 全局绑定
const requireContext = require.context(".", false, /\.js$/);
export default (Vue: any) => {requireContext.keys().forEach(path => {if (path.indexOf("index") === -1) {const requireItem = requireContext(path).default;
Vue.directive(requireItem.name, requireItem.instance);
}
});
};
而后能够在 main.js 外面引入即可。
- 应用办法：
<div v-longpress="{cb: langClick, time: 500, iosUnable: true}" >
内容
</div>
正文完
