twitter-bootstrap-3 – 在Vue JS中处理Bootstrap模态隐藏事件

发布时间：2020-12-18 00:18:01 所属栏目：安全来源：网络整理

导读：在Vue(2)中有没有一个像样的方法来处理Bootstrap(3)模态隐藏事件？我发现这是一种JQuery方式,但我无法弄清楚如何在Vue中捕获此事件： $('#myModal').on('hidden.bs.modal',function () { // do something…}) 添加诸如v-on之类的东西：hide.bs.modal =“ale

在Vue(2)中有没有一个像样的方法来处理Bootstrap(3)模态隐藏事件？

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

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

添加诸如v-on之类的东西：hide.bs.modal =“alert(‘hide’)似乎不起作用.

解决方法

Bootstrap使用JQuery来触发自定义事件hidden.bs.modal,因此它不容易被Vue捕获(我认为它使用了本机事件).

因为您必须在页面上使用JQuery来使用Bootstrap的本机模式,所以只需使用JQuery来捕获它.假设你在你的Bootstrap模态中添加了一个ref =“vuemodal”,你可以这样做.

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

Working example.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!