vben admin中嵌套modal关闭问题

Question

使用vben admin，在制作消息通知模块时，遇到以下问题：

这是第一层弹窗

这是第二层弹窗
两层弹窗使用的都是vben modal，大体代码如下：

<script setup lang="ts">
import { useVbenModal } from '@vben/common-ui';

import { $t } from '#/locales';

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  fullscreenButton: false,
  class: 'w-[1000px]',
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {},
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      await initData();
    }
  },
  title: $t('ui.widgets.setting'),
});
/**
 * 初始化数据
 */
async function initData() {}
</script>
<template>
  <Modal>1</Modal>
</template>

现在的问题是，当我打开两层弹窗时，点击第二层弹窗以外，第一层弹窗以内的区域时，两个弹窗会同时关闭，这个效果显然是不合理的。
想知道怎么样才能点击第二层弹窗以外，第一层弹窗以内的区域时，只关闭第二层弹窗

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 关键点分析：
   - 问题在于在vben admin中使用嵌套的modal弹窗时，可能遇到关闭逻辑上的困难，比如如何正确关闭内层和外层弹窗，以及防止关闭操作出现混乱。
2. 解决方案：
   - 首先，在vben admin中，modal通常有自己的显示和关闭逻辑。对于嵌套的modal，需要明确各自的触发和关闭条件。
   - 假设外层modal的显示通过showOuterModal变量控制，内层modal通过showInnerModal变量控制。
   - 外层modal代码示例：
   ```html
   
   
   
   <button>打开第二层弹窗</button>
   
   
   
   
   <script></script>

- 内层modal代码示例：html



<button>关闭第二层弹窗</button>
<button>关闭两层弹窗</button>




<script></script>

```
3. 多种解决方案的优缺点：
- 优点：
- 这种通过变量控制显示和关闭的方式简单直观，易于理解和维护。可以清晰地看到每个弹窗的状态变化。
- 缺点：
- 如果弹窗嵌套层次较多，变量管理可能会变得复杂，需要仔细梳理各个变量之间的关系，以确保关闭逻辑正确。
4. 总结：
- 通过在vben admin中使用变量来分别控制嵌套modal的显示和关闭，可以有效地实现消息通知模块中多层弹窗的功能。在处理多层弹窗时，关键是要明确每个弹窗的状态变量以及正确的关闭逻辑，通过合理的变量赋值和事件处理来达到预期的效果。

需要注意的是，以上代码中的VbenModal是基于vben admin的组件，实际使用时请根据vben admin的具体组件定义和使用方式进行调整。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。