如何让v-alert组件显示在v-dialog组件之上？

问题场景 #

全局的v-alert组件在v-dialog内触发时，会被dialog遮挡，调整dialog的elevation和z-index无法解决该层级问题。

解决方案 #

方案1：使用Teleport将alert挂载到更高层级元素 #

Vuetify组件支持teleport属性，可将v-alert直接挂载到<body>上，脱离原有DOM层级，自然就能显示在dialog之上：

<template>
  <v-app>
    <v-container>
      <v-dialog v-model="showDialog">
        <v-btn @click="toggleAlert">点击触发提示</v-btn>
      </v-dialog>
      <!-- 通过teleport将alert挂载到body -->
      <v-alert 
        v-model="showAlert"
        teleport="body"
      >我是提示信息</v-alert>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(true)
const showAlert = ref(false)
const toggleAlert = () => {
  showAlert.value = !showAlert.value
}
</script>

方案2：手动设置alert的z-index #

Vuetify的v-dialog默认z-index为2000，给v-alert设置更高的z-index数值即可：

<template>
  <v-app>
    <v-container>
      <v-dialog v-model="showDialog">
        <v-btn @click="toggleAlert">点击触发提示</v-btn>
      </v-dialog>
      <!-- 通过style提升z-index层级 -->
      <v-alert 
        v-model="showAlert"
        style="z-index: 2001;"
      >我是提示信息</v-alert>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(true)
const showAlert = ref(false)
const toggleAlert = () => {
  showAlert.value = !showAlert.value
}
</script>

说明 #

方案1更推荐，teleport从根源上解决了DOM层级导致的遮挡问题，无需硬编码z-index数值，适配性更强；方案2适合快速临时解决特定场景的层级冲突。

内容的提问来源于stack exchange，提问作者Lloyd