Twitter bootstrap 3 在Vue JS中处理引导模式隐藏事件

Vue（2）中是否有合适的方法来处理引导（3）模式隐藏事件

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

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

---

添加类似于

v-on:hide.bs.modal=“alert（'hide'）

的内容似乎不起作用。

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

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

显示模式
//以后如果使用组件
//或者在引导结构中
接近

引导程序使用JQuery触发自定义事件

hidden.bs.modal

，因此Vue不容易捕获它（我相信它使用了隐藏的本机事件）

由于您必须在页面上使用JQuery才能使用引导的本机模式，因此只需使用JQuery来捕获它。假设您向引导模式中添加一个

ref=“vuemodal”

，您可以执行类似的操作

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

.

请参见 在那里您可以找到事件“隐藏”或“隐藏” 因此，您可以绑定此事件：

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

---

这可能会很晚，但如果您正在使用您创建的自定义模态组件（modal.vue），另一种方法是

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

创建方法

现在调用将自定义事件与自定义/可重用模态组件一起使用

方法doSomething将在模态关闭时被调用。您还可以使用该方法劫持另一个jquery事件，以便它更易于管理

---

如果使用bootstrap vue，下面的代码片段将非常有用：

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

---

有关其他事件，请参阅

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

然后只需在您希望的元素上使用它（本例是在一个可折叠的引导程序上，但您可以将其用于任何其他引导程序事件）：

...                           

---

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

我曾希望有一个更干净的（非jquery）解决方案，但这可能是我将使用的，直到更好的东西弹出为止；）仅供参考-如果您碰巧有另一个Vue标记使此ref=“vuemodal“不显示，它将不会显示在$refs中。ref为“”的对象必须渲染才能工作。如果使用引导vue，这是正确的答案，但这就是最初的问题所在。切换到bootstrap vue是一个非常重要的更改，但这并不是每个人都能得到的正确答案。@GufranHasan如果按“Esc”键隐藏模式，这将不起作用。在这种情况下，您的vue实例将不知道模态正在隐藏。因此，组件数据“showmodel”仍然为真，而模式现在已隐藏。现在，当您单击任何按钮再次显示该模式时，它不会显示为“showModa”仍然为真，因此从逻辑上讲，该模式仍然可见！！你必须刷新页面。这正是为什么我来到这个问题，希望找到一个解决方案：(

    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');
               });
           }
        }
    }

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

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>