Vue.js中打开新模态框后原有模态框自动隐藏的问题

这个问题我之前也碰到过，Bootstrap-Vue的模态框默认有个「一次只显示一个模态框」的行为——当你打开新模态框时，它会自动隐藏所有已打开的模态框。要解决这个，我们只需要调整新模态框的打开配置，同时优化主模态框的属性来提升体验。

具体步骤： #

1. 修改新模态框的打开方式
   不要直接用ref调用show()，而是使用Bootstrap-Vue提供的$bvModal.show()方法，并且传入hideOtherModals: false参数，这样就不会关闭主模态框了。比如：

   // 打开添加部门的新模态框
   openAddDeptModal() {
     this.$bvModal.show('add-department-modal', {
       hideOtherModals: false // 关键配置：不隐藏其他已打开的模态框
     })
   }
   

   这里的add-department-modal是你新模态框的id属性值。

2. 给主模态框添加persistent属性
   在主模态框的<b-modal>标签里加上persistent属性，这样点击新模态框的背景区域时，不会意外关闭主模态框：

   <b-modal :id="modalInfo.id" persistent>
     <!-- 主模态框内容：部门下拉框 + 添加按钮 -->
     <b-form-select :options="deptOptions"></b-form-select>
     <b-button @click="openAddDeptModal">添加新部门</b-button>
   </b-modal>
   

3. 保留原主模态框的显示逻辑
   你原来的showModal()方法可以继续使用，不需要修改：

   showModal () { 
     this.clearForm(); 
     this.formInfo.formSubmitted = false; 
     this.$refs[this.modalInfo.id].show(); 
   }
   

额外提示： #

• 如果你习惯用ref打开新模态框，也可以在调用show()时传入配置对象：

  this.$refs.addDeptModal.show({ hideOtherModals: false })
  

• 当你在新模态框里添加完部门后，记得重新调用AJAX获取最新的部门列表，刷新主模态框的下拉选项，这样用户就能看到刚添加的部门了。

内容的提问来源于stack exchange，提问作者Veshraj Joshi