Vue JS에서 부트스트랩 모달 숨기기 이벤트 처리

Vue JS에서 부트스트랩 모달 숨기기 이벤트 처리

Vue (2)에서 Bootstrap (3) 모달 숨김 이벤트를 처리하는 적절한 방법이 있습니까?

JQuery 방법으로 이 이벤트를 Vue에서 캡처하는 방법을 찾을 수 없습니다.

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

다음과 같은 것을 추가한다.v-on:hide.bs.modal="alert('hide')효과가 없는 것 같습니다.

부트스트랩은 JQuery를 사용하여 커스텀이벤트를 트리거합니다.hidden.bs.modal그래서 Vue에게 쉽게 잡히지 않는다(후드 아래에서 원주민 이벤트를 사용한다고 생각한다).

Bootstrap의 네이티브모달을 사용하려면 페이지에 JQuery가 있어야 하므로 JQuery를 사용하여 캡처하십시오.를 추가한다고 가정합니다.ref="vuemodal"Bootstrap modal에 따라 이렇게 할 수 있습니다.

new Vue({
  el:"#app",
  data:{
  },
  methods:{
    doSomethingOnHidden(){
      //do something
    }
  },
  mounted(){
    $(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden)
  }
})

작업 예

https://bootstrap-vue.js.org/docs/components/modal#overview 를 참조해 주세요.이 이벤트를 바인드 할 수 있도록, 「숨김」 또는 「숨김」이벤트를 찾을 수 있습니다.

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

하나의 옵션은 변수를 연결하는 것입니다.

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>

시간이 늦어질 수 있지만 작성한 커스텀모달컴포넌트(Modal.vue)를 사용하고 있는 경우 다음 방법을 사용합니다.

1. 닫힘 이벤트를 잡기 위해 마운트된 메서드를 만듭니다(아래와 같은 이름일 필요는 없습니다).

    mounted: function(){
        this.triggerHidden();
    }

2. 메서드를 작성하다

    methods: {
       triggerHidden: function(){
           var self = this;
           if( $('#getModal').length ){
               $('#getModal').on('hidden.bs.modal', function(){
                  //catch the native bootstrap close event and trigger yours
                  self.#emit('modal-close');
               });
           }
        }
    }

3. 커스텀/커스텀 모드 컴포넌트와 함께 커스텀 이벤트 사용 문의

   <custom-modal @modal-close="doSomething"></custom-modal>modal이 닫히면 doSomething 메서드가 호출됩니다.또한 접근 방식을 사용하여 다른 jquery 이벤트를 하이잭할 수 있으므로 관리가 용이합니다.

Custom Vue Directive를 작성하면 다음과 같은 이점이 있습니다.

Vue.directive('bsevent', {
   bind: function bsEventCreate(el, binding, vnode) {
      let method = binding.value || (() => { });
      $(el).on(binding.arg.replaceAll(/_/g, "."), (event) => { method(event); });
   },
   
   unbind(el, binding) {
      $(el).off(binding.arg.replace(/_/, "."));
   },
});

그런 다음 원하는 요소(이 예는 접을 수 있는 부트스트랩에 있지만 다른 부트스트랩이벤트에 사용할 수 있습니다)로 사용합니다.

<div id="myCollapsible" class="collapse" v-bsevent:hidden_bs_collapse="methodToCall">
  ...                           
</div>

이벤트를 점(show.bs.modal => show_bs_modal)이 아닌 밑줄로 등록하는 것만 기억하십시오.

bootstrap-vue를 사용하는 경우 아래 코드 스니펫이 도움이 됩니다.

export default {
  mounted() {
    this.$root.$on('bv::modal::hide', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
    })
  }
}

기타 이벤트는 공식 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/42512770/handle-bootstrap-modal-hide-event-in-vue-js