时间戳

首页 > 解决方案 > 使用模式 Bootstrap-vue 在背景上获取事件点击

javascript - 使用模式 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 并且它可以工作，但我无法在背景上激活这个点击

标签： javascriptvuejs2modal-dialogbootstrap-vue

解决方案

模式上没有backdrop事件，这就是为什么你没有看到任何事情发生。

您可以做的是观看hide包含trigger属性的事件。此触发器属性将包含触发隐藏事件的内容，包括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到模态以防止这种行为。

推荐阅读