vue使用自定义指令实现长按事件（适用于h5，pc）

在Vue中，可以通过自定义指令来实现长按事件。以下是一个简单的自定义指令示例，它可以在H5和PC端工作：

// 注册一个全局自定义指令 `v-longpress`
Vue.directive('longpress', {
  bind: function (el, binding, vNode) {
    // 确保提供的表达式是函数
    if (typeof binding.value !== 'function') {
      // 获取组件名称
      const compName = vNode.context.name;
      let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be`;
      if (compName) { warn += `Found in component '${compName}'`; }
      console.warn(warn);
    }
    // 定义变量
    let pressTimer = null;
    // 创建计时器（ 1秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return;
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          // 执行函数
          handler(e);
        }, 1000);
      }
    }
    // 取消计时器
    let cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    }
    // 运行函数
    const handler = (e) => {
      binding.value(e);
    }
    // 添加事件监听器
    el.addEventListener('mousedown', start);
    el.addEventListener('touchstart', start);
    // 取消计时器
    el.addEventListener('click', cancel);
    el.addEventListener('mouseout', cancel);
    el.addEventListener('touchend', cancel);
    el.addEventListener('touchcancel', cancel);
  }
});

在你的Vue组件中，可以这样使用这个自定义指令：

<template>
  <div v-longpress="longPressHandler">长按我</div>
</template>
 
<script>
export default {
  methods: {
    longPressHandler() {
      // 处理长按事件
      console.log('长按事件触发了！');
    }
  }
}
</script>

这个自定义指令v-longpress可以绑定一个函数，在长按事件发生时执行这个函数。它通过监听mousedown和touchstart事件来开始计时，如果在1秒内发生了click或者其他鼠标事件，则取消计时器；如果1秒钟内没有其他事件发生，则执行绑定的函数。