关于前端:移动端长按事件模拟vue指令封装

不废话，间接上代码：

• 目录构造

  此目录构造只是将 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>