Bootstrap Vue模态框页面重载后多模态框重叠堆叠问题咨询

算力阿峰

2026-8-26

问题场景

代码中通过单个<b-modal>组件配合动态title属性，实现多按钮共用模态框的逻辑：
按钮触发调用的方法：

showModal(title) {
    this.modalTitle = title
    this.$bvModal.show("add-modal")
}

对应模态框代码：

<b-modal
   id="add-modal"
   ref="modal"
   v-bind:title="'Add Item to ' + modalTitle + ' list'"
   ...

首次页面加载时功能正常，触发热更新/浏览器重载后，点击按钮会出现多个模态框堆叠的异常。

根本原因

热更新过程中Vue组件实例替换时，旧的模态框DOM节点（含遮罩层）没有被完全销毁，残留在页面<body>节点下；新组件实例挂载后会生成新的同ID模态框节点，调用show方法时新旧节点同时触发显示，就会出现多层堆叠的问题。

可行修复方案

最小改动方案：调整show方法逻辑，打开前先清除残留状态
直接修改触发方法，在显示模态框前先强制隐藏同ID实例，等DOM状态更新完成后再执行显示逻辑，兼容所有场景：
```
showModal(title) {
  this.modalTitle = title
  // 先清除同ID模态框的显示状态
  this.$bvModal.hide("add-modal")
  this.$nextTick(() => {
    this.$bvModal.show("add-modal")
  })
}
```
根源修复方案：配置模态框自动销毁属性
给<b-modal>添加两个内置属性，让模态框每次关闭时直接销毁自身DOM节点，从根源避免节点残留：
```
<b-modal
  id="add-modal"
  ref="modal"
  v-bind:title="'Add Item to ' + modalTitle + ' list'"
  lazy
  dispose-on-hide
  ...
>
```

生命周期兜底方案：组件卸载时主动销毁模态框
在组件卸载钩子中主动调用模态框销毁方法，避免HMR替换组件时留下旧节点：

// Vue3 生命周期写法
beforeUnmount() {
  this.$bvModal.hide("add-modal")
  this.$refs.modal?.dispose()
}

// Vue2 生命周期写法
beforeDestroy() {
  this.$bvModal.hide("add-modal")
  if (this.$refs.modal) this.$refs.modal.dispose()
}