模态ls不使用V-Show

Question

我有一个模式，它正在作为组件导入并添加到页面中。该模式在页面中被调用为

 <TwoFactorStatus v-show="showTwoFactoreModal"></TwoFactorStatus>

然后按钮就会有一个点击事件。

 <button class="btn btn-danger pull-right" @click="ShowTwoFactoreModal()" type="danger">Disable two-factor authentication</button>

然后调用一个方法到

ShowTwoFactoreModal() {
      this.showTwoFactoreModal = true;
    }

Modal看起来是这样的

<template>
<div class="modal fade" id="showTwoFactoreModal" data-keyboard="false" data-backdrop="static" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                Two Factor Switch Off
            </div>
            <div class="modal-body">
            <p>This modal must pass</p>
            </div>
        </div>
    </div>
</div>
</template>

Answer 1

将ShowTwoFactoreModal函数更改为如下所示：

ShowTwoFactoreModal() {
    this.showTwoFactoreModal = true;
    $('#showTwoFactoreModal').modal('show');
}

或者使用:类绑定并追加活动类，但这更直接。我通常是用eventBus做的，但这可能对你的项目来说太过分了.如果您要使用事件总线来完成此操作，可以将一个eventListener附加到模态组件，并将一个showModal函数回调附加到不需要设置if的侦听器上，您只需调用它：$(this.$el).modal('show'); .但那是另一个故事..。

Answer 2

引导模式是使用自己的js函数来处理显示和隐藏模式。Vue Vue只能显示和隐藏您编写的逻辑组件.但是，引导模态是通过在模态组件中附加类来显示和隐藏的。

如果您想使用没有bootstrap.js的切换，您可以使用jQuery和Vue，如下所示。(如果只想显示，那么更改方法.show())

//200 is duration of fade animation.
<button @click="toggleModal"></button>

function toggleModal() {
    $('#your_modal_id').fadeToggle(200)
}

如果您想在它们的js中使用引导自己的模式，那么您可以在这里复制和粘贴模态代码。https://getbootstrap.com/docs/4.0/components/modal/

如果您想要Vue Vue处理所有进程，那么编写逻辑来完成它。如果需要帮助就去问吧。