feat: ✨add dbl click event

xpyjs · May 16, 2023 · 4839744 · 4839744
1 parent 67699ee
commit 4839744
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -11,6 +11,7 @@
       :show-today="true"
       :show-weekend="true"
       @row-click="onClickRow"
+      @row-dbl-click="onDblClickRow"
       @move-slider="onMoveSlider"
       @add-link="onAddLink"
       @click-link="onClickLink"
@@ -190,6 +191,10 @@ const onClickRow = (data: any) => {
   console.log('click row', data);
 };
 
+const onDblClickRow = (data: any) => {
+  console.log('dblclick row', data);
+};
+
 const onMoveSlider = (data: any) => {
   console.log('move slider', data);
 };

diff --git a/src/components/common/Row.vue b/src/components/common/Row.vue
@@ -22,7 +22,6 @@
     @mouseenter.capture="onEnter"
     @mouseleave="onLeave"
     @click="onClick"
-    @dblclick="onDblClick"
   >
     <slot />
   </div>
@@ -52,14 +51,27 @@ function onLeave() {
   $param.hoverItem = null;
 }
 
-const { EmitRowClick } = useEvent();
+const { EmitRowClick, EmitRowDblClick } = useEvent();
+let clicks = 0;
+const delay = 300;
+let timer: any = null;
 function onClick() {
-  $param.selectItem = props.data ?? null;
-  EmitRowClick(props.data?.data);
-}
+  clicks++;
+  if (clicks === 1) {
+    // click
+    timer = setTimeout(() => {
+      clicks = 0;
+    }, delay);
+
+    $param.selectItem = props.data ?? null;
+    EmitRowClick(props.data?.data);
+  } else {
+    // dbl-click
+    clearTimeout(timer);
+    clicks = 0;
 
-function onDblClick() {
-  // 抛出 data
+    EmitRowDblClick(props.data?.data);
+  }
 }
 </script>
 

diff --git a/src/composables/useEvent.ts b/src/composables/useEvent.ts
@@ -18,10 +18,22 @@ export default () => {
   }
 
   // (e: 'row-dbl-click', data: any): void;
+  /**
+   * 双击行事件
+   * @param row 该行的原始数据
+   */
+  function EmitRowDblClick(row: any) {
+    rootEmit.value?.('row-dbl-click', toRaw(row));
+  }
+
   // (e: 'row-checked', state: boolean, data: any): void;
-  // (e: 'move-slider', { row: any; old: { start: Date; end: Date } }[]): void;
-  // (e: 'move-progress', data: any, old: number): void;
-  // (e: 'no-date-error'): void;
+  /**
+   * 选择行事件 checkbox
+   * @param row 该行的原始数据
+   */
+  function EmitRowChecked(row: any) {
+    rootEmit.value?.('row-checked', toRaw(row));
+  }
 
   /**
    * 移动滑块事件
@@ -47,9 +59,14 @@ export default () => {
     rootEmit.value?.('add-link', data);
   }
 
+  // (e: 'move-progress', data: any, old: number): void;
+  // (e: 'no-date-error'): void;
+
   return {
     setRootEmit,
     EmitRowClick,
+    EmitRowDblClick,
+    EmitRowChecked,
     EmitMoveSlider,
     EmitAddLink
   };