Vue Bootstrap：打开第二个模态框时隐藏第一个模态框的实现方法

背景代码 #

触发第一个模态框的按钮：

<b-button variant="success" v-b-modal.import-list-type>
    <feather-icon
        icon="DownloadCloudIcon"
        class="mr-50"
    />
    <span class="align-middle">Import</span>
</b-button>        

第一个模态框：

<b-modal
    id="import-list-type"
    cancel-variant="secondary"
    hide-footer
    centered
    size="lg"
    title="Select Import Type"
>
    <ProjectImportType/>
</b-modal>

子组件<ProjectImportType/>内触发第二个模态框的按钮：

<b-button variant="primary" v-b-modal.import-xml-modal> Import XML </b-button>

第二个模态框：

<b-modal
    id="import-xml-modal"
    cancel-variant="secondary"
    hide-footer
    centered
    size="xl"
    title="New Import"
    @shown="handleImportTypeModal"
>
    <template #modal-header="">
        <b-img
            :src="require('@/assets/images/projects/xml.png')"
            width="34"
            alt="New Import"
        />
        <h5 class="mr-auto ml-2 mt-2" vertical-align="bottom">New Import</h5>
    </template>
    <ProjectImportNew/>
</b-modal>

需求 #

当第二个模态框import-xml-modal显示时，自动隐藏第一个模态框import-list-type。

解决方案 #

方法一：利用模态框shown事件结合$bvModal API

在包含两个模态框的父组件中，实现已绑定的handleImportTypeModal方法，调用Bootstrap-Vue的全局模态框API隐藏第一个模态框：

methods: {
  handleImportTypeModal() {
    // 通过模态框ID隐藏第一个模态框
    this.$bvModal.hide('import-list-type');
  }
}

第二个模态框的@shown事件会在模态框完全显示后触发，此时执行上述方法即可自动关闭第一个模态框。

方法二：修改子组件按钮逻辑，先关再开

如果希望逻辑封装在子组件内，可以修改子组件的按钮点击事件，先隐藏第一个模态框，再打开第二个：

1. 修改子组件按钮代码：

<b-button variant="primary" @click="openXmlModal"> Import XML </b-button>

2. 在子组件的methods中添加方法：

methods: {
  openXmlModal() {
    // 先隐藏第一个模态框
    this.$bvModal.hide('import-list-type');
    // 再打开第二个模态框
    this.$bvModal.show('import-xml-modal');
  }
}

说明 #

Bootstrap-Vue提供的$bvModal全局API支持通过模态框ID直接调用hide（隐藏）和show（显示）方法，无需额外依赖，只需确保模态框ID在全局唯一即可。

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