uniapp 双击事件

在uni-app中，可以通过两种方式来实现双击事件。

方式一：使用自定义指令
1. 在`main.js`文件中注册自定义指令：

import Vue from 'vue'
Vue.directive('doubletap', {
  bind: function (el, binding) {
    let touchStartTime = 0
    el.addEventListener('touchstart', function (event) {
      if (event.touches.length !== 1) return
      if (touchStartTime === 0) {
        touchStartTime = Date.now()
      } else {
        if (Date.now() - touchStartTime < 300) {
          binding.value(event)
        }
        touchStartTime = 0
      }
    })
  }
})

2. 在需要使用双击事件的元素上，使用`v-doubletap`指令，并传入相应的处理函数：

<template>
  <div>
    <div v-doubletap="handleDoubleTap">双击我触发双击事件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDoubleTap(event) {
      // 在这里处理双击事件
      console.log('双击事件发生')
    }
  }
}
</script>

方式二：使用自定义组件
1. 创建一个名为`DoubleTap`的自定义组件：

<template>
  <div @click="handleClick">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastClickTime: 0
    }
  },
  methods: {
    handleClick() {
      const currentTime = new Date().getTime()
      if (currentTime - this.lastClickTime < 300) {
        this.$emit('doubletap')
      }
      this.lastClickTime = currentTime
    }
  }
}
</script>

2. 在需要使用双击事件的地方，使用`DoubleTap`组件，并监听`doubletap`事件：

<template>
  <div>
    <DoubleTap @doubletap="handleDoubleTap">
      双击我触发双击事件
    </DoubleTap>
  </div>
</template>

<script>
import DoubleTap from '@/components/DoubleTap'

export default {
  components: {
    DoubleTap
  },
  methods: {
    handleDoubleTap() {
      // 在这里处理双击事件
      console.log('双击事件发生')
    }
  }
}
</script>