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

twitter-bootstrap-3 Vue.js

米亚

2020-04-07

Vue（2）中是否有适当的方式来处理Bootstrap（3）模态隐藏事件？

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

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

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

第4059篇《在Vue JS中处理Bootstrap模式隐藏事件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
蛋蛋 2020.04.07

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

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

一种选择是将其绑定到变量： 

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>
阿飞 2020.04.07

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

工作示例。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android