![](/img/trans.png)
[英]Bootstrap-vue modal resets window.scrolY on close when shown inside vue-tabulator @row-click event
[英]Get event click on backdrop using modal Bootstrap-vue
我使用Vue2和Boostrap-vue來制作模態組件,這是代碼
我通過了以下道具@backdrop="handleBackdrop"
<template>
<b-modal
v-model="showModal"
id="modal"
@backdrop="handleBackdrop"
@ok="handleBackdrop"
>
...
</template>
<script>
data() {
return {
showModal: false
}
},
methods: {
show() {
this.showModal = true;
},
hide() {
this.showModal = false;
},
handleBackdrop(ev) {
ev.preventDefault();
console.log("Click backdrop");
}
}
</script>
我正在使用此@ok測試功能handleBackdrop,它可以工作,但是我無法在背景幕上激活此單擊
模態上沒有backdrop
事件,這就是為什么您什么都沒看到的原因。
相反,您可以做的是觀看hide
事件,該事件包含一個trigger
屬性。 此觸發屬性將包含觸發hide事件的事件,包括被單擊的backdrop
。
https://bootstrap-vue.js.org/docs/components/modal/#prevent-closing
<template>
<b-modal id="modal" @hide="onHide"></b-modal>
</template>
<script>
new Vue({
el: '#app',
methods: {
onHide(evt) {
if(evt.trigger === "backdrop"){
evt.preventDefault();
this.handleBackdrop();
}
},
handleBackdrop() {
console.log('Backdrop clicked')
}
}
})
</script>
如果您只是想在單擊背景時防止模式關閉,則可以向模式中添加“ no-close-on-backdrop
”以防止此行為。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.