feat: add directive for hover (#620)

src/cell/cell.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="styleCell" @click="onClick">
+  <div v-hover="{ className: `${name}--hover`, active: hover }" :class="styleCell" @click="onClick">
     <div :class="`${name}__left`">
       <div v-if="leftIconContent" :class="`${name}__left-icon`">
         <t-node :content="leftIconContent" />
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, toRefs, h } from 'vue';
 import { ChevronRightIcon } from 'tdesign-icons-vue-next';
-import { renderTNode, renderContent, TNode, useEmitEvent } from '../shared';
+import { renderTNode, renderContent, TNode, useEmitEvent, Hover } from '../shared';
 import config from '../config';
 import CellProps from './props';
 import { useFormDisabled } from '../form/hooks';
@@ -40,6 +40,7 @@ const name = `${prefix}-cell`;
 export default defineComponent({
   name,
   components: { TNode },
+  directives: { Hover },
   props: CellProps,
   emits: ['click'],
   setup(props, context) {

src/cell/demos/single.vue

@@ -1,19 +1,19 @@
 <template>
   <t-cell-group bordered>
-    <t-cell title="单行标题" arrow />
-    <t-cell title="单行标题" arrow required />
-    <t-cell title="单行标题" arrow>
+    <t-cell title="单行标题" arrow hover />
+    <t-cell title="单行标题" arrow hover required />
+    <t-cell title="单行标题" arrow hover>
       <template #note>
         <t-badge :count="16" />
       </template>
     </t-cell>
-    <t-cell title="单行标题">
+    <t-cell title="单行标题" hover>
       <template #note>
         <t-switch :default-value="true" />
       </template>
     </t-cell>
-    <t-cell title="单行标题" note="辅助信息" arrow />
-    <t-cell title="单行标题" :left-icon="lockIcon" arrow />
+    <t-cell title="单行标题" note="辅助信息" arrow hover />
+    <t-cell title="单行标题" :left-icon="lockIcon" arrow hover />
   </t-cell-group>
 </template>
 

src/shared/hover.ts

@@ -0,0 +1,38 @@
+import { DirectiveBinding } from 'vue';
+
+interface BindingObj {
+  active: boolean;
+  className: string;
+}
+
+const Hover = {
+  created(el: HTMLElement, binding: DirectiveBinding<BindingObj>) {
+    const startTime = 50;
+    const stayTime = 70;
+    const { className, active } = binding.value;
+
+    if (!active) return;
+
+    el.addEventListener(
+      'touchstart',
+      () => {
+        setTimeout(() => {
+          el?.classList.add(className);
+        }, startTime);
+      },
+      false,
+    );
+
+    el.addEventListener(
+      'touchend',
+      () => {
+        setTimeout(() => {
+          el?.classList.remove(className);
+        }, stayTime);
+      },
+      false,
+    );
+  },
+};
+
+export default Hover;

src/shared/index.ts

@@ -16,3 +16,6 @@ export * from './useTouch';
 export * from './useScrollParent';
 export * from './useExpose';
 export * from './useTest';
+
+/* directives */
+export { default as Hover } from './hover';