Question

在Vue（2）中有没有一种方法来处理Bootstrap（3）模态隐藏事件？

我发现这是一种JQuery方式，但我无法弄清楚如何在Vue中捕获此事件：

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

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

Answer 1

Bootstrap使用JQuery来触发自定义事件$request->request->get('someid', 'default values');，因此它不容易被Vue捕获（我相信它会使用本机事件）。

由于您必须在页面上使用JQuery来使用Bootstrap的本机模式，因此只需使用JQuery来捕获它。假设您在Bootstrap模式中添加hidden.bs.modal，您可以执行类似的操作。

ref="vuemodal"

Working example

Answer 2

请参阅https://bootstrap-vue.js.org/docs/components/modal#overview 在这里您可以找到事件“隐藏”或“隐藏” 因此，您可以绑定此事件：

 ![Screenshot][1]
 ![Screenshot][2]
 ![Screenshot][3]
 ![Screenshot][4]

Answer 3

一种选择是将其与变量联系起来：

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 4

这可能已经晚了，但是如果您使用的是创建的自定义模态组件（Modal.vue），则另一种方法是

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

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

Answer 5

也许创建自定义 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(/_/, "."));
   },
});

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

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

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

Answer 6

如果使用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.

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

6 个答案: