代码之家 › 专栏 › 技术社区 › JLLMNCHR

如何在引导Vue<b-modal>X-close按钮上调用某些方法

bootstrap-modal vue.js

JLLMNCHR · 技术社区 · 5 年前

使用

我试过了 @接近 , @闭式割台

<b-modal ok-only @ok="methodOk" @close="methodClose">
    <span>Window closed</span>
</b-modal>

0 回复 | 直到 5 年前

Hiws 5 年前

这个 @close 事件就是你所追求的。

如果它对您不起作用,我建议您检查BootstrapVue的版本,或者检查控制台中的潜在错误。

new Vue({
  el: '#app',
  methods: {
    onClose() {
      alert('Modal X button pressed');
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-btn v-b-modal.my-modal>Open Modal</b-btn>
  <b-modal id="my-modal" @close="onClose">
    Click the `X` top right to see an alert.
  </b-modal>
</div>

推荐文章

Clebo Sevic · React:从回调访问State内部的数组时未定义

2 年前

balzored · 背景下的画布外引导

2 年前

brok lothbrok · 如何在身份剃刀页面中使用模态引导。net core

2 年前

Irfan Chaniago · 使用模式文件上传表单更新

2 年前

Volkan · 刺激中的Rails 7和Bootstrap错误-无法解析模块说明符Bootstrap

2 年前

timmyblaze · Bootstrap 5模式,带后台交互

2 年前

Identic 7 · 在PHP MVC中使用引导模式编辑数据

2 年前

user21885339 · Modal无法在Vue/Firebase应用程序中工作,因为未定义“$”

3 年前