Vue引导-当第二个模态打开时隐藏第一个模态

Question

我有这个按钮：

<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>

现在，当第二个模态显示时，我想隐藏第一个模态
你能告诉我怎么做吗？

Answer 1

在第一个模态上，您可以添加一个v-if="showImportTypeModal"；指令，并在单击第二个按钮时将其设置为false。showImportTypeModal将是一个数据属性，默认情况下为false，单击第一个按钮时设置为true。