手动封装vue2长按事件

在 Vue2 中，我们可以通过自定义指令来实现长按事件的功能。以下是一个简单的示例：

1. 创建一个名为`v-longpress`的自定义指令。

Vue.directive('longpress', {
  bind: function (el, binding, vNode) {
    // 长按时间阈值，默认为 500ms
    let pressTime = 500
    // 判断是否传入了自定义阈值
    if (binding.arg) {
      pressTime = parseInt(binding.arg)
    }

    let pressTimer = null

    // 开始计时
    const start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, pressTime)
      }
    }

    // 取消计时
    const cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(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. 使用自定义指令

<template>
  <div v-longpress="doSomething">长按我</div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log('长按事件触发了')
    },
  },
}
</script>

在上述示例中，我们创建了一个名为 `v-longpress` 的自定义指令。在指令的 `bind` 钩子函数中，我们绑定了鼠标和触摸事件的监听器，并开始计时。如果用户长按一定时间（默认为 500ms），则会触发 `binding.value()`，也就是绑定的回调函数。如果用户在计时过程中松开了鼠标或触摸屏幕，则会取消计时。

最后，在组件中使用 `v-longpress` 指令并传入一个回调函数即可实现长按事件的功能。