vueJs - z-index 不适用于 child div inside v-dialog

Question

我在 vuejs 屏幕 v-Dialog 中添加了一个 span 来显示加载图像。由于 v-dialog 的 z-index 为 220，这是内联样式，我的新跨度（加载图像）低于 v-dialog。我什么都试过了，还是不行。

我需要在 v-dialog

上方显示加载图片

Answer 1

方法一：

将加载器元素放入 v-dialog 组件中：

<v-dialog>
  <v-card>
    <div class="loader"/>
    ...

.loader {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

方法二：

将您的加载器元素放在根组件中，并设置您在应用中使用的最高 z-index，以便它显示在所有元素之上：

App.vue

<div id="app">
  <div class="loader"/>
  ...

.loader {
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}