不废话，间接上代码：
- 目录构造
此目录构造只是将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>