Question

我目前正在为一个项目编写Vue组件。我遇到了一个问题，其中Bootstrap-Vue模态将重新打开而不是关闭。我正在2.6.10版和Bootstrap 4中使用Vue.js。

<template>
    <div>
        <b-button v-b-modal.rating-modal @click="showModal()">
            Click me
            <b-modal ref="rating-modal" no-close-on-backdrop centered title="Rate" class="rating-modal" @ok="hideModal" @cancel="hideModal" @close="hideModal">
                <div>
                    Content of the modal...
                </div>
            </b-modal>
        </b-button>
    </div>
</template>

<script>

    export default {
        name: "Rating",
        components: {
            ,
        },
        methods: {
            showModal() {
                this.$refs['rating-modal'].show();
            },
            hideModal() {
                this.$refs['rating-modal'].hide();
            },
        }
    }
    ;
</script>

我希望在我单击“取消”，“确定”或标题中的十字时关闭它。

Answer 1

好的，我自己解决了此问题。我要做的就是像这样将b-modal标签从b-button标签中移出：

<template>
    <div>
        <b-button v-b-modal.rating-modal @click="showModal()">
            Click me
        </b-button>
        <b-modal ref="rating-modal" no-close-on-backdrop centered title="Rate" class="rating-modal" @ok="hideModal" @cancel="hideModal" @close="hideModal">
            <div>
                Content of the modal...
            </div>
        </b-modal>
    </div>
</template>

Bootstrap-Vue Modal每次都会重新打开，但在ESC中除外

1 个答案: