diff --git a/examples/app.vue b/examples/app.vue index dae72fb..bbb64e7 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -65,18 +65,21 @@ placement="bottom" v-model="tooltipValue" > - bottombottom + test - test
priamry + priamry1 priamry diff --git a/packages/components/src/tooltip/src/tooltip.vue b/packages/components/src/tooltip/src/tooltip.vue index 8dd6ddd..dfb12e9 100644 --- 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(); const tooltipPopper = ref(); -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); } };