在 Vue JS 中处理 Bootstrap 模态隐藏事件

Question

在 Vue (2) 中有没有合适的方法来处理 Bootstrap (3) 模态隐藏事件？

我发现这是一种 JQuery 方式，但我不知道如何在 Vue 中捕获此事件：

$('#myModal').on('hidden.bs.modal', function () {
  // do something…
})

添加类似 v-on:hide.bs.modal="alert('hide') 的内容似乎不起作用。

Answer 1

一个选项是将它绑定到一个变量：

data: function(){
  return {
       showModal: false
        //starts as false.  Set as true when modal opens. Set as false on close, which triggers the watch function.
},
watch: {
  showModal: function(){
    if(this.showModal == false){
     // do something
  },
}

HTML

<button id="show-modal" @click="showModal = true">Show Modal</button>

 //later if using a component
<modal v-if="showModal" @close="showModal = false">

 // or alternatively in the bootstrap structure
<div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal" @click="showModal = false">Close</button>
</div>

Answer 2

Bootstrap 使用 JQuery 触发自定义事件 hidden.bs.modal 所以它不容易被 Vue 捕获（我相信它在幕后使用原生事件）。

因为你必须在页面上有 JQuery 才能使用 Bootstrap 的原生模态，所以只需使用 JQuery 来捕捉它。假设您将 ref="vuemodal" 添加到 Bootstrap 模态，您可以这样做。

new Vue({
  el:"#app",
  data:{
  },
  methods:{
    doSomethingOnHidden(){
      //do something
    }
  },
  mounted(){
    $(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden)
  }
})

Working example.

Answer 3

请看https://bootstrap-vue.js.org/docs/components/modal#overview 在那里你可以找到事件 "hide" 或 "hidden" 所以你可以绑定这个事件：

<b-modal ref="someModal" @hide="doSometing">

Answer 4

这可能会迟到，但如果您使用的是您创建的自定义模态组件 (Modal.vue)，另一种方法是

在 mounted 中创建一个方法来捕获关闭事件（不必与下面的名称相同）

    mounted: function(){
        this.triggerHidden();
    }

创建方法

    methods: {
       triggerHidden: function(){
           var self = this;
           if( $('#getModal').length ){
               $('#getModal').on('hidden.bs.modal', function(){
                  //catch the native bootstrap close event and trigger yours
                  self.#emit('modal-close');
               });
           }
        }
    }

现在请将您的自定义事件与您的 custom/reusable 模态组件一起使用

<custom-modal @modal-close="doSomething"></custom-modal> 模式关闭时将调用 doSomething 方法。您还可以使用该方法劫持其他 jquery 事件，使其更易于管理。

Answer 5

如果使用 bootstrap-vue，那么下面的代码片段会有所帮助：

export default {
  mounted() {
    this.$root.$on('bv::modal::hide', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
    })
  }
}

其他活动请参考official docs.

Answer 6

也许创建自定义 Vue 指令可以帮助：

Vue.directive('bsevent', {
   bind: function bsEventCreate(el, binding, vnode) {
      let method = binding.value || (() => { });
      $(el).on(binding.arg.replaceAll(/_/g, "."), (event) => { method(event); });
   },
   
   unbind(el, binding) {
      $(el).off(binding.arg.replace(/_/, "."));
   },
});

然后将它用在你想要的元素上（这个例子是在 bootstrap 可折叠上，但你可以将它用在任何其他 bootstrap 事件上）：

<div id="myCollapsible" class="collapse" v-bsevent:hidden_bs_collapse="methodToCall">
  ...                           
</div>

唯一要记住的是用下划线而不是点来注册事件 (show.bs.modal => show_bs_modal)。

在 Vue JS 中处理 Bootstrap 模态隐藏事件

Handle Bootstrap modal hide event in Vue JS

bootstrap-modal

twitter-bootstrap-3

vue.js

vuejs2