fix: tooltip的显隐使用拦截器判断是否disabled

dyggod · Dec 14, 2022 · f8e848c · f8e848c
1 parent 82d6a87
commit f8e848c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/examples/app.vue b/examples/app.vue
@@ -65,18 +65,21 @@
         placement="bottom"
         v-model="tooltipValue"
       >
-        <dg-button
-          type="primary"
-          >bottom</dg-button
-        ></dg-tooltip
+        <dg-button type="primary">bottom</dg-button></dg-tooltip
+      >
+      <dg-button
+        @mouseenter="tooltipValue = true"
+        @mouseleave="tooltipValue = false"
+        >test</dg-button
       >
-      <dg-button  @mouseenter="tooltipValue = true"
-          @mouseleave="tooltipValue = false">test</dg-button>
     </div>
     <div style="width: 500px; display: flex; justify-content: center">
       <dg-tooltip content="my tooltip" placement="left" trigger="click"
         ><dg-button type="primary">priamry</dg-button></dg-tooltip
       >
+      <dg-tooltip content="my tooltip" placement="left" trigger="click" :visible="true"
+        ><dg-button type="primary">priamry1</dg-button></dg-tooltip
+      >
       <dg-tooltip content="my tooltip" placement="left" trigger="contextmenu"
         ><dg-button type="primary">priamry</dg-button></dg-tooltip
       >

diff --git a/packages/components/src/tooltip/src/tooltip.vue b/packages/components/src/tooltip/src/tooltip.vue
@@ -49,10 +49,28 @@ const props = defineProps(tooltipProps);
 const tooltipTriggerDiv = ref<HTMLElement>();
 const tooltipPopper = ref<HTMLElement>();
 
-const isControlled = ref(props.modelValue !== false && props.modelValue !== undefined);
+const isControlled = ref(
+  props.modelValue !== false
+  && props.modelValue !== undefined,
+);
+
+// 给isControlled赋值时要经过拦截器，拦截器中判断disabled是否为true
+const isControlledInterceptor = {
+  set(value: boolean) {
+    if (props.disabled === true) {
+      return true;
+    }
+    isControlled.value = value;
+    return true;
+  },
+};
 
 const visible = computed(() => {
+  // 如果disabled为true，就不是受控组件
   // 如果visible和modelValue属性不是undefined，就不是受控组件
+  if (props.disabled === true) {
+    return false;
+  }
   if (props.visible !== undefined) {
     return props.visible;
   }
@@ -84,28 +102,28 @@ watch(() => props.visible, (val) => {
 
 // 设置不同的事件：mouseenter, mouseleave, click, focus, blur, contextmenu
 const handleMouseEnter = () => {
-  isControlled.value = true;
+  isControlledInterceptor.set(true);
 };
 const handleMouseLeave = () => {
   setTimeout(() => {
-    isControlled.value = false;
+    isControlledInterceptor.set(false);
   }, props.hideAfter);
 };
 const handleClick = () => {
-  isControlled.value = !isControlled.value;
+  isControlledInterceptor.set(!isControlled.value);
 };
 const handleFocus = () => {
-  isControlled.value = true;
+  isControlledInterceptor.set(true);
 };
 const handleBlur = () => {
   setTimeout(() => {
-    isControlled.value = false;
+    isControlledInterceptor.set(false);
   }, props.hideAfter);
 };
 const handleContextMenu = (event: Event) => {
   // 阻止浏览器默认的右键菜单
   event.preventDefault();
-  isControlled.value = !isControlled.value;
+  isControlledInterceptor.set(!isControlled.value);
 };
 // 鼠标点击任何地方，tooltip消失
 const handleDocumentClick = (event: MouseEvent) => {
@@ -117,7 +135,9 @@ const handleDocumentClick = (event: MouseEvent) => {
     if (tooltipPopper.value?.contains(target)) {
       return;
     }
-    isControlled.value = false;
+    setTimeout(() => {
+      isControlledInterceptor.set(false);
+    }, props.hideAfter);
   }
 };