fix(hover): enable using dynamic params (#963)

Tencent · Jul 17, 2023 · cfaff1f · cfaff1f
1 parent 32e08e8
commit cfaff1f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/src/button/button.vue b/src/button/button.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    v-hover="{ className: `${name}--hover`, active: !disabled }"
+    v-hover="{ className: `${name}--hover` }"
     :class="buttonClass"
     :disabled="disabled"
     :type="type"
@@ -35,7 +35,7 @@ export default defineComponent({
   directives: { Hover },
   props: ButtonProps,
   emits: ['click'],
-  setup(props, context) {
+  setup(props) {
     const disabled = useFormDisabled();
     const internalInstance = getCurrentInstance();
     const buttonClass = computed(() => [

diff --git a/src/cell/cell.vue b/src/cell/cell.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-hover="{ className: `${name}--hover`, active: hover }" :class="styleCell" @click="onClick">
+  <div v-hover="{ className: `${name}--hover`, disabledName: 'hoverDisabled' }" :class="styleCell" @click="onClick">
     <div :class="`${name}__left`">
       <div v-if="leftIconContent" :class="`${name}__left-icon`">
         <t-node :content="leftIconContent" />
@@ -63,11 +63,12 @@ export default defineComponent({
       `${name}`,
       `${name}--${props.align}`,
       {
-        [`${name}--hover`]: props.hover && disabled.value,
         [`${name}--borderless`]: !props.bordered,
       },
     ]);
 
+    const hoverDisabled = computed(() => !props.hover || disabled.value);
+
     const onClick = (e: Event) => {
       if (!disabled.value) {
         props.onClick?.(e);
@@ -76,6 +77,7 @@ export default defineComponent({
 
     return {
       ...toRefs(props),
+      hoverDisabled,
       name,
       onClick,
       styleCell,

diff --git a/src/shared/hover.ts b/src/shared/hover.ts
@@ -1,21 +1,22 @@
-import { DirectiveBinding } from 'vue';
+import { DirectiveBinding, VNode } from 'vue';
 
 interface BindingObj {
-  active: boolean;
+  disabledName: string;
   className: string;
 }
 
 const Hover = {
-  created(el: HTMLElement, binding: DirectiveBinding<BindingObj>) {
+  created(el: HTMLElement, binding: DirectiveBinding<BindingObj>, vnode: VNode) {
     const startTime = 50;
     const stayTime = 70;
-    const { className, active = true } = binding.value;
-
-    if (!active) return;
+    const { className, disabledName = 'disabled' } = binding.value;
 
     el.addEventListener(
       'touchstart',
       () => {
+        // @ts-ignore
+        if (vnode.ctx.ctx[disabledName]) return;
+
         setTimeout(() => {
           el?.classList.add(className);
         }, startTime);
@@ -26,6 +27,9 @@ const Hover = {
     el.addEventListener(
       'touchend',
       () => {
+        // @ts-ignore
+        if (vnode.ctx.ctx[disabledName]) return;
+
         setTimeout(() => {
           el?.classList.remove(className);
         }, stayTime);