Fix primevue overlay component z-index might be incorrect (#4074)

This commit is contained in:
Hayden
2025-06-08 16:20:41 +08:00
committed by GitHub
parent 97edaade63
commit 6d4eafb07a

View File

@@ -1,14 +1,12 @@
<!-- The main global dialog to show various things --> <!-- The main global dialog to show various things -->
<template> <template>
<Dialog <Dialog
v-for="(item, index) in dialogStore.dialogStack" v-for="item in dialogStore.dialogStack"
:key="item.key" :key="item.key"
v-model:visible="item.visible" v-model:visible="item.visible"
class="global-dialog" class="global-dialog"
v-bind="item.dialogComponentProps" v-bind="item.dialogComponentProps"
:auto-z-index="false"
:pt="item.dialogComponentProps.pt" :pt="item.dialogComponentProps.pt"
:pt:mask:style="{ zIndex: baseZIndex + index + 1 }"
:aria-labelledby="item.key" :aria-labelledby="item.key"
> >
<template #header> <template #header>
@@ -35,25 +33,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ZIndex } from '@primeuix/utils/zindex'
import { usePrimeVue } from '@primevue/core'
import Dialog from 'primevue/dialog' import Dialog from 'primevue/dialog'
import { computed, onMounted } from 'vue'
import { useDialogStore } from '@/stores/dialogStore' import { useDialogStore } from '@/stores/dialogStore'
const dialogStore = useDialogStore() const dialogStore = useDialogStore()
const primevue = usePrimeVue()
const baseZIndex = computed(() => {
return primevue?.config?.zIndex?.modal ?? 1100
})
onMounted(() => {
const mask = document.createElement('div')
ZIndex.set('model', mask, baseZIndex.value)
})
</script> </script>
<style> <style>