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

* 修复顶部的用户资料下拉在弹窗被打开时,仍然可以被触发的问题
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

View File

@ -2,11 +2,11 @@ import type { Arrayable, MaybeElementRef } from '@vueuse/core';
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 { useMouseInElement } from '@vueuse/core';
import { useElementHover } from '@vueuse/core';
/**
* true false
@ -18,15 +18,19 @@ export function useHoverToggle(
refElement: Arrayable<MaybeElementRef>,
delay: (() => number) | number = 500,
) {
const isOutsides: Array<Ref<boolean>> = [];
const isHovers: Array<Ref<boolean>> = [];
const value = ref(false);
const timer = ref<ReturnType<typeof setTimeout> | undefined>();
const refs = Array.isArray(refElement) ? refElement : [refElement];
refs.forEach((refEle) => {
const listener = useMouseInElement(refEle, { handleOutside: true });
isOutsides.push(listener.isOutside);
const eleRef = computed(() => {
const ele = unref(refEle);
return ele instanceof Element ? ele : (ele?.$el as Element);
});
const isOutsideAll = computed(() => isOutsides.every((v) => v.value));
const isHover = useElementHover(eleRef);
isHovers.push(isHover);
});
const isOutsideAll = computed(() => isHovers.every((v) => !v.value));
function setValueDelay(val: boolean) {
timer.value && clearTimeout(timer.value);