by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: userDropdown triggered unnecessary while overlay shown (#5520)

Browse Source 
* 修复顶部的用户资料下拉在弹窗被打开时，仍然可以被触发的问题
This commit is contained in:
Netfan 2025-02-12 17:59:59 +08:00 committed by GitHub
parent e7b009786b
commit 182f1c9da8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/effects/hooks/src/use-hover-toggle.ts
View File

@ -2,11 +2,11 @@ import type { Arrayable, MaybeElementRef } from '@vueuse/core';
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { computed, onUnmounted, ref, watch } from 'vue'; import { computed, onUnmounted, ref, unref, watch } from 'vue';
import { isFunction } from '@vben/utils'; import { isFunction } from '@vben/utils';
import { useMouseInElement } from '@vueuse/core'; import { useElementHover } from '@vueuse/core';
/** /**
* 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false * 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
@ -18,15 +18,19 @@ export function useHoverToggle(
refElement: Arrayable<MaybeElementRef>, refElement: Arrayable<MaybeElementRef>,
delay: (() => number) | number = 500, delay: (() => number) | number = 500,
) { ) {
const isOutsides: Array<Ref<boolean>> = []; const isHovers: Array<Ref<boolean>> = [];
const value = ref(false); const value = ref(false);
const timer = ref<ReturnType<typeof setTimeout> | undefined>(); const timer = ref<ReturnType<typeof setTimeout> | undefined>();
const refs = Array.isArray(refElement) ? refElement : [refElement]; const refs = Array.isArray(refElement) ? refElement : [refElement];
refs.forEach((refEle) => { refs.forEach((refEle) => {
const listener = useMouseInElement(refEle, { handleOutside: true }); const eleRef = computed(() => {
isOutsides.push(listener.isOutside); const ele = unref(refEle);
return ele instanceof Element ? ele : (ele?.$el as Element);
});
const isHover = useElementHover(eleRef);
isHovers.push(isHover);
}); });
const isOutsideAll = computed(() => isOutsides.every((v) => v.value)); const isOutsideAll = computed(() => isHovers.every((v) => !v.value));
function setValueDelay(val: boolean) { function setValueDelay(val: boolean) {
timer.value && clearTimeout(timer.value); timer.value && clearTimeout(timer.value);