Vue.js下拉菜单遮挡模态框，怎么办？

如何解决Vue.js中弹出框关闭后模态框无法正常显示的问题？

在Vue.js开发中，下拉菜单与模态框的嵌套组合十分常见。我们期望点击模态框选项后，下拉菜单关闭，模态框完整呈现。但实际情况却可能事与愿违，模态框虽然出现，却被下拉菜单遮挡，影响用户体验。

出现这个问题的根源在于层叠上下文（Stacking Context）。每个HTML元素都拥有层叠上下文，它决定了元素在Z轴上的排列顺序。Z轴数值越高，元素就越靠“上”，也越容易遮挡其他元素。由于下拉菜单通常拥有更高的层叠上下文，即使模态框已经显示，仍然可能被下拉菜单遮盖。

为了解决这个问题，我们可以采取以下两种方案：

方案一：利用 append-to-body 属性

许多 UI 组件库，如 Element UI 和 Ant Design Vue，都为模态框组件提供了 append-to-body 属性。将其设置为 true，可以将模态框的渲染节点从组件内部移动到 body 元素下，从而突破下拉菜单的层叠上下文限制。

以 Element UI 为例，代码如下：

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="showModal = true">
        打开模态框
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>

  <el-dialog
    :visible.sync="showModal"
    :append-to-body="true"
    title="模态框标题"
  >
    <span>这是一个模态框</span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

方案二：借助 Teleport 组件

Vue 3 提供了 Teleport 组件，它可以将组件的渲染内容“传送”到 DOM 中的任何位置，不受组件层级结构限制。

使用 Teleport 组件，我们可以将模态框直接渲染到 body 元素下，从而避开下拉菜单的层叠上下文。

代码如下：

<template>
  <div>
    <Popover class="relative bg-white">
      <div class="mx-auto max-w-7xl px-4 sm:px-6">
        <div class="flex items-center justify-between border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
          <PopoverGroup as="nav" class="hidden space-x-10 md:flex">
            <Popover class="relative" v-slot="{ open }">
              <PopoverButton
                :class="[
                  open ? 'text-gray-900' : 'text-gray-500',
                  'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
                ]"
                @click="handlePopoverOpen(open)"
              >
                <span>Solutions</span>
                <ChevronDownIcon
                  :class="[open ? 'text-gray-600' : 'text-gray-400', 'ml-2 h-5 w-5 group-hover:text-gray-500']"
                  aria-hidden="true"
                />
              </PopoverButton>

              <transition
                enter-active-class="transition ease-out duration-200"
                enter-from-class="opacity-0 translate-y-1"
                enter-to-class="opacity-100 translate-y-0"
                leave-active-class="transition ease-in duration-150"
                leave-from-class="opacity-0 translate-y-1"
                leave-to-class="opacity-100 translate-y-0"
              >
                <PopoverPanel
                  class="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2"
                >
                  <div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
                    <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"></div>
                    <div class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
                      <subscriptions-modal @open="handleModalOpen"></subscriptions-modal>
                    </div>
                  </div>
                </PopoverPanel>
              </transition>
            </Popover>
          </PopoverGroup>
        </div>
      </div>
    </Popover>

    <Teleport to="body">
      <Modal v-if="showModal" @close="showModal = false">
        <template #header>
          模态框标题
        </template>
        <p>这是一个模态框</p>
      </Modal>
    </Teleport>
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

总结

无论是 append-to-body 属性还是 Teleport 组件，都能有效解决下拉菜单遮挡模态框的问题，提升用户体验。选择哪种方案取决于项目中使用的 UI 组件库以及 Vue 版本。

常见问题解答

1. 为什么设置 z-index 不起作用？

   z-index 只能控制同一层叠上下文内元素的堆叠顺序，而下拉菜单和模态框通常位于不同的层叠上下文，因此单独修改 z-index 并不能解决问题。

2. 使用 Teleport 组件需要注意什么？

   • 确保目标元素（如 body）在 Teleport 组件渲染时已经存在。
   • 注意事件冒泡和样式隔离问题，必要时进行手动处理。

3. 除了上述两种方案，还有其他解决方法吗？

   • 可以尝试将下拉菜单和模态框放在同一层叠上下文中，例如使用 position: fixed 或 position: absolute 并设置相同的父级元素。
   • 一些 UI 组件库提供自定义层叠上下文的功能，可以利用该功能将模态框放置在更高的层级。

4. 如何判断元素的层叠上下文？

   可以通过浏览器的开发者工具查看元素的层叠上下文信息，例如 Chrome 浏览器中 Elements 面板的 Computed 标签页。

5. 如何选择合适的解决方案？

   如果使用的 UI 组件库提供了 append-to-body 属性，则优先使用该属性；否则，推荐使用 Teleport 组件，它更加灵活可控。