我有一个全局
v-alert
,用于显示错误消息或信息,但是在 v-dialog
中,当我尝试显示隐藏在其后面的警报时。我尝试过使用 elevation
并将 z-index
设置在 v-dialog
上。
所需的行为是
v-alert
显示在 v-dialog
之上
<template>
<v-app>
<v-container>
<v-dialog v-model="showDialog">
<v-btn @click="toggleAlert">Click for Alert</v-btn>
</v-dialog>
<v-alert v-model="showAlert">I am the alert</v-alert>
</v-container>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
const showDialog = ref(true)
const showAlert = ref(false)
const toggleAlert = () => {
showAlert.value = !showAlert.value
}
</script>
设置 v-dialog 的 z-index 的主要问题是它是在 v-overlay 中呈现的,这意味着 v-dialog 存在于与 v-alert 不同的stacking context中。
设置 v-alert 的 z-index 将在将其放置在覆盖层上方时起作用。
v-overlay 的 z 索引为 2400,因此任何大于该值的值都可以。
.v-alert {
z-index: 2401
}