모달 Bootstrap-vue를 사용하여 백그라운드에서 이벤트 클릭 가져오기

모달 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을 사용하여 기능 핸들을 테스트하고 있으며 백드롭은 작동하지만 이 클릭을 백그라운드에서 활성화할 수 없습니다.

없습니다.backdrop모달의 이벤트 때문에 아무 일도 일어나지 않는 거야

대신 할 수 있는 건 그 대신hide포함된 이벤트trigger소유물.이 트리거 속성에는 다음과 같은 이벤트 숨기기를 트리거한 항목이 포함됩니다.backdrop를 클릭합니다.

https://bootstrap-vue.js.org/docs/components/modal/ #filename-filename

<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이 동작을 방지하기 위해 모달로 이동합니다.

언급URL : https://stackoverflow.com/questions/57896630/get-event-click-on-backdrop-using-modal-bootstrap-vue