JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-05-05 09:46:56 +08:00
Code Issues Projects Releases Wiki Activity

fix(design): popover zindex不生效

Browse Source
This commit is contained in:
roymondchen 2024-08-15 16:11:36 +08:00 committed by roymondchen
parent d4408aaa32
commit e53c0e1ce5
1 changed files with 3 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/design/src/Popover.vue
View File

@ -39,8 +39,6 @@ const props = withDefaults(defineProps<PopoverProps>(), {
visible: undefined, visible: undefined,
}); });
const zIndex = useZIndex();
const curZIndex = ref<number>(2);
const popoverVisible = ref(false); const popoverVisible = ref(false);
const visibleWatch = watch( const visibleWatch = watch(
@ -85,11 +83,12 @@ onMounted(() => {
referenceElementRef.value = getCurrentInstance()?.proxy?.$el.nextElementSibling; referenceElementRef.value = getCurrentInstance()?.proxy?.$el.nextElementSibling;
}); });
const zIndex = useZIndex();
watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => { watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
destroy(); destroy();
if (!referenceElement || !popperElement) return; if (!referenceElement || !popperElement) return;
popperElement.style.zIndex = `${curZIndex.value}`; popperElement.style.zIndex = `${zIndex.nextZIndex()}`;
popperElement.focus(); popperElement.focus();
instanceRef.value = createPopper(referenceElement, popperElement, { instanceRef.value = createPopper(referenceElement, popperElement, {
@ -132,7 +131,7 @@ const mouseleaveHandler = () => {
timer = setTimeout(() => { timer = setTimeout(() => {
popoverVisible.value = false; popoverVisible.value = false;
}, 300); }, 500);
}; };
if (props.trigger === 'click' && typeof props.visible === 'undefined') { if (props.trigger === 'click' && typeof props.visible === 'undefined') {
@ -170,21 +169,6 @@ if (props.trigger === 'hover' && typeof props.visible === 'undefined') {
}); });
} }
watch(
popoverVisible,
(popoverVisible) => {
if (!popoverVisible) {
return;
}
nextTick().then(() => {
curZIndex.value = zIndex.nextZIndex();
});
},
{
immediate: true,
},
);
const destroy = () => { const destroy = () => {
if (!instanceRef.value) return; if (!instanceRef.value) return;