im-ui-mobile 0.1.0 → 0.1.2

package/components/im-double-tap-view/im-double-tap-view.vue

@@ -0,0 +1,93 @@
+<template>
+    <view :class="class" :style="style" @tap="handleTap">
+        <slot></slot>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onUnmounted } from 'vue'
+
+export interface DoubleTapViewProps {
+    /** 双击间隔时间（毫秒）默认 300ms */
+    delay?: number
+    /** 是否阻止事件冒泡 */
+    stopPropagation?: boolean,
+    /** CSS样式类 **/
+    class?: string,
+    /** CSS样式 **/
+    style?: string
+}
+
+export interface DoubleTapViewEmits {
+    /** 单击事件 */
+    (e: 'single-tap', event: any): void
+    /** 双击事件 */
+    (e: 'double-tap', event: any): void
+}
+
+const props = withDefaults(defineProps<DoubleTapViewProps>(), {
+    delay: 300,
+    stopPropagation: false
+})
+
+const emit = defineEmits<DoubleTapViewEmits>()
+
+// 状态管理
+const lastTapTime = ref(0)
+let tapTimeout: ReturnType<typeof setTimeout> | null = null
+
+/**
+ * 清除定时器
+ */
+const clearTapTimeout = () => {
+    if (tapTimeout) {
+        clearTimeout(tapTimeout)
+        tapTimeout = null
+    }
+}
+
+/**
+ * 处理点击事件
+ */
+const handleTap = (event: any) => {
+    if (props.stopPropagation) {
+        event?.stopPropagation?.()
+    }
+
+    const currentTime = Date.now()
+    const timeDiff = currentTime - lastTapTime.value
+
+    // 双击检测
+    if (timeDiff > 0 && timeDiff < props.delay) {
+        clearTapTimeout()
+        emit('double-tap', event)
+        lastTapTime.value = 0
+    } else {
+        // 可能是单击
+        lastTapTime.value = currentTime
+        tapTimeout = setTimeout(() => {
+            emit('single-tap', event)
+            lastTapTime.value = 0
+            tapTimeout = null
+        }, props.delay)
+    }
+}
+
+/**
+ * 重置组件状态
+ */
+const reset = () => {
+    clearTapTimeout()
+    lastTapTime.value = 0
+}
+
+// 暴露方法给父组件
+defineExpose({
+    reset
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+    clearTapTimeout()
+})
+</script>