Vue+Element UI 项目中 el-dialog 内嵌 v-viewer 的层级问题

在 Vue+Element UI 项目中，当开发者在 el-dialog 内嵌 v-viewer 时，可能会遇到层级问题，导致 v-viewer 位于 el-dialog 下方。本文将深入探讨这一问题，提供解决方案，并提供示例代码进行说明。

层级问题的原因

这一问题产生的根源在于 el-dialog 和 v-viewer 的 CSS 样式。默认情况下，el-dialog 具有较高的 z-index，这意味着它在页面上会覆盖其他元素。而 v-viewer 的 z-index 较低，导致它被 el-dialog 遮挡。

解决方案

解决这一层级问题的方法有两种：

调整 CSS 样式

一种方法是调整 v-viewer 的 CSS 样式，使其具有比 el-dialog 更高的 z-index。以下代码段展示了如何实现这一调整：

.v-viewer-container {
  z-index: 9999 !important;
}

在应用此样式后，v-viewer 将始终位于 el-dialog 之上。

使用自定义组件

另一种方法是创建一个自定义组件，将 el-dialog 和 v-viewer 封装在一起。在自定义组件中，可以为 v-viewer 设置更高的 z-index，而不会影响 el-dialog 的样式。以下代码段展示了如何创建这样一个自定义组件：

<template>
  <el-dialog :visible="dialogVisible">
    <v-viewer :images="images" />
  </el-dialog>
</template>

<script>
export default {
  props: ['dialogVisible', 'images'],
  mounted() {
    // 设置 v-viewer 的 z-index
    this.$nextTick(() => {
      const viewerContainer = this.$el.querySelector('.v-viewer-container');
      viewerContainer.style.zIndex = 9999;
    });
  }
};
</script>

使用示例

以下示例展示了如何在 Vue+Element UI 项目中使用上述解决方案之一：

<template>
  <div>
    <el-button @click="showDialog">打开 Dialog</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import VViewer from 'v-viewer';
import AppDialog from './AppDialog.vue'; // 自定义组件

export default {
  components: { VViewer, AppDialog },
  setup() {
    const dialogVisible = ref(false);
    const images = [
      {
        src: 'image1.jpg',
      },
      {
        src: 'image2.jpg',
      },
    ];

    const showDialog = () => {
      dialogVisible.value = true;
    };

    return { dialogVisible, images, showDialog };
  },
};
</script>

在上面的示例中，当用户点击按钮时，将打开一个 el-dialog。对话框中嵌入了 v-viewer，它将显示一系列图像。

总结

在 Vue+Element UI 项目中，当 el-dialog 中嵌入了 v-viewer 时，可能会遇到层级问题。可以通过调整 CSS 样式或使用自定义组件来解决这一问题。通过应用这些解决方案，开发者可以确保 v-viewer 始终位于 el-dialog 之上，从而为用户提供良好的用户体验。