Shopware 6嵌套模态框问题：仅关闭子模态框保留父模态框的实现方法

问题根源 #

Shopware 6默认的sw-modal组件，若未正确处理事件传递或未使用官方模态框管理机制，会导致点击嵌套模态框的关闭按钮/背景时，事件向上触发父模态框的关闭逻辑，最终同时关闭两个模态框。

解决方案 #

方案1：使用Shopware官方模态框栈（推荐） #

Shopware内置ModalStack服务，通过$modal方法管理模态框层级，自动处理嵌套关闭逻辑：

1. 打开嵌套模态框
   在主模态框的按钮点击方法中，调用$modal.open加载嵌套模态框：

// 主模态框组件内的方法
openNestedModal() {
  this.$modal.open('custom-nested-modal', {
    // 传递给嵌套模态框的业务参数，如选中的订单ID
    orderId: this.currentOrderId
  }, {
    // 模态框配置（可选）
    size: 'medium',
    title: '补充订单相关信息'
  });
}

2. 关闭嵌套模态框
   在嵌套模态框组件内，调用$modal.close仅关闭当前模态框：

// 嵌套模态框组件内的方法
saveAndClose() {
  // 执行信息保存逻辑
  this.submitRelatedInfo().then(() => {
    this.$modal.close('custom-nested-modal');
  });
},

cancelClose() {
  this.$modal.close('custom-nested-modal');
}

这种方式下，ModalStack会自动维护模态框层级，关闭嵌套模态框时不会影响父模态框的状态。

方案2：手动阻止事件冒泡（自定义模态框场景） #

若通过v-if手动控制模态框显示，需在嵌套模态框的所有关闭触发点阻止事件向上冒泡：

1. 修改嵌套模态框模板

<sw-modal
  v-if="isNestedModalOpen"
  @close="handleNestedClose"
  @backdrop-click="handleNestedBackdropClick"
>
  <template #header>
    <h2>获取相关信息</h2>
    <button @click="closeNestedModal" class="sw-modal__close">×</button>
  </template>
  
  <!-- 嵌套模态框内容区域 -->
  
  <template #footer>
    <button @click="saveAndClose">保存</button>
    <button @click="closeNestedModal">取消</button>
  </template>
</sw-modal>

2. 添加事件处理方法

// 嵌套模态框组件内的方法
handleNestedClose(event) {
  event.stopPropagation();
  this.isNestedModalOpen = false;
},

handleNestedBackdropClick(event) {
  event.stopPropagation();
  this.isNestedModalOpen = false;
},

closeNestedModal(event) {
  event.stopPropagation();
  this.isNestedModalOpen = false;
},

saveAndClose(event) {
  event.stopPropagation();
  // 执行保存逻辑后关闭模态框
  this.saveData().then(() => {
    this.isNestedModalOpen = false;
  });
}

通过event.stopPropagation()阻断关闭事件向上传递，确保仅当前嵌套模态框被关闭。

方案3：禁用嵌套模态框的背景点击关闭 #

若不需要点击背景关闭嵌套模态框，可直接给sw-modal添加closeOnBackdropClick="false"属性，避免背景点击触发关闭事件：

<sw-modal
  v-if="isNestedModalOpen"
  closeOnBackdropClick="false"
  @close="handleNestedClose"
>
  <!-- 模态框内容 -->
</sw-modal>

之后仅处理关闭按钮的点击事件，并阻止冒泡即可。

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