Vue中b-modal组件@close事件失效问题求助

问题原因 #

你的代码里给b-modal的size属性传了col-md-6 col-sm-6这类栅格类，这不符合BootstrapVue的API规范——size属性仅支持预设的尺寸关键字（sm/md/lg/xl），错误的属性值会导致模态框的DOM结构异常，进而影响@close事件的正常触发。

修复步骤 #

1. 修正尺寸配置：移除错误的size属性值，改用custom-class配合CSS自定义模态框宽度
2. 确保事件覆盖所有关闭场景：可以同时绑定@close和@hidden事件（@close是关闭开始时触发，@hidden是关闭完成后触发，后者能确保覆盖所有关闭操作）

修正后的代码 #

<b-modal
  centered
  id="modal-center"
  title="product regist"
  body-class="p-0 m-0"
  custom-class="modal-custom-size"
  ok-title="regist"
  cancel-title="cancel"
  @ok="registerProduct"
  @cancel="cancelRegister"
  @close="cancelRegister"
  @hidden="cancelRegister"
>
  ...
</b-modal>

对应的CSS样式（模拟col-md-6的宽度效果）：

.modal-custom-size .modal-dialog {
  max-width: 50%;
  /* 移动端可按需调整：
  @media (max-width: 576px) {
    max-width: 90%;
  }
  */
}

验证效果 #

修改完成后，点击取消按钮、遮罩层、右上角关闭叉号，cancelRegister方法都会正常触发，完成日期或分类的初始化操作。

内容的提问来源于stack exchange，提问作者정성우