如何在 V-Dialog 上方显示 V-Alert

Question

我有一个全局

v-alert

，用于显示错误消息或信息，但是在

v-dialog

中，当我尝试显示隐藏在其后面的警报时。我尝试过使用

elevation

并将

z-index

设置在

v-dialog

上。

所需的行为是

v-alert

显示在

v-dialog

之上

VuetifyPlay 链接

<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>

Answer 1

设置 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
}