vue3 v-longpress长按指令

v-longpress是一个自定义指令，可以用于在Vue 3应用程序中实现长按事件。下面是一个简单的实现方法：

1. 在Vue实例中注册该指令：

const app = Vue.createApp({
  directives: {
    longpress: {
      mounted(el, binding) {
        let pressTimer = null
        const delay = 500

        // 开始长按
        const start = (e) => {
          if (e.type === 'click' && e.button !== 0) {
            return
          }

          if (pressTimer === null) {
            pressTimer = setInterval(() => {
              handler()
            }, delay)
          }
        }

        // 取消长按
        const cancel = () => {
          if (pressTimer !== null) {
            clearInterval(pressTimer)
            pressTimer = null
          }
        }

        // 执行长按事件
        const handler = () => {
          binding.value()
        }

        // 添加事件监听器
        el.addEventListener('mousedown', start)
        el.addEventListener('touchstart', start)

        // 取消事件监听器
        el.addEventListener('click', cancel)
        el.addEventListener('mouseout', cancel)
        el.addEventListener('touchend', cancel)
        el.addEventListener('touchcancel', cancel)
      }
    }
  }
})

2. 在模板中使用指令：

<button v-longpress="handleLongPress">长按我</button>

其中，`handleLongPress`是长按事件的处理函数。当用户按下并按住按钮500ms时，该函数将被调用。