Vue.js에서 Foundation 이벤트를 청취하시겠습니까?

Vue.js에서 Foundation 이벤트를 청취하시겠습니까?

Vue.js에서 다음과 같은 일반적인 구조를 가진 앱을 구축하고 있습니다.

<app>
    <filters-component></filters-component>
    <div class="off-canvas-content">
        <nav-component></nav-component>
        <div class="row card-grid">
            <card-component v-for="item in items">
                <modal-component v-if="launchModal === true"></modal-component>
            </card-component>
        </div>
    </div>
</app>

이를 통해 DOM 상의 모달은 데이터 요소가launchModal(버튼을 클릭하여 모달 부팅 후)가 true로 설정됩니다.이거 잘 되는데 닫으면 반대로 해야 돼요.

Foundation의 설명서에 따르면 공개(모달) 컴포넌트는 다음과 같은 이벤트를 내보내야 합니다.closed.zf.reveal닫혔을 때요.

부모 요소(카드 컴포넌트)에서 이 이벤트를 수신한 후 변경하려면 어떻게 해야 합니까?launchModal거짓으로 바꿀 수 있을까요?

감사합니다!

요컨대, 이것은 요약하면 다음과 같습니다.modal-component(이것들을 Modal 스크립트에 추가합니다).비디오)

methods:{
    onModalClosed(){
        this.$emit("modal-closed")
    }
},
mounted(){
    this.$el.addEventListener('closed.zf.reveal', this.onModalClosed)
},
beforeDestroy(){
    this.$el.removeEventListener('closed.zf.reve‌​al', this.onModalClosed)
}

또는 어떤 요소가 이벤트를 발생시키느냐에 따라 그 취지의 무엇인가가 결정됩니다.다른 요소에서 방출되는 경우closed.zf.reveal이벤트를 추가할 수 있습니다.ref="modal"그것을 사용하고 나서this.$refs.modal.addEventListener그리고.this.$refs.modal.removeEventListener.

그럼 넌 그냥

<modal-component v-if="launchModal === true"
                 @modal-closed="launchModal = false">
</modal-component>

편집

따라서 이벤트를 듣는 것의 문제는 재단이 jQuery를 사용하여 이벤트를 발생시킨다는 것입니다.즉, 네이티브 메서드에서는 수신할 수 없습니다(addEventListenerjQuery로 재생해야 합니다.위에서 수정한 코드는 다음과 같습니다.

methods:{
    onModalClosed(){
        this.$emit("modal-closed")
    }
},
mounted(){
    $(this.$el).on('closed.zf.reveal', this.onModalClosed)
},
beforeDestroy(){
    $(this.$el).off('closed.zf.reve‌​al', this.onModalClosed)
}

그리고 이것은 실제로 그 사건을 포착합니다.문제는 모달 초기화 시 Foundation이 모달의 외부로 이동하여 문서 하단에 추가하는 것입니다.이로 인해 Vue는 다음 경우에 오류를 발생시킵니다.launchModal로 설정되어 있다.false모달은 Vue 내에 존재하지 않기 때문에 DOM에서 삭제하려고 하면 Vue가 불만을 제기합니다.

그런 상황이라면, 나는 당신이 당신의 의수를 사용하는 것을 추천한다.v-if 매우 느리게 렌더링되는 것들을 위해 모달 안에 있습니다.그 결과, 이러한 컴포넌트가 됩니다.

Vue.component("modal", {
  props:["show"],
  template: "#modal-template",
  watch:{
    show(newVal){
      if (newVal)
        $(this.$el).foundation("open")
    }
  },
  methods:{
    onModalClosed(){
      this.$emit("modal-closed")
    }
  },
  mounted() {
    new Foundation.Reveal($(this.$el))
    $(this.$el).on("closed.zf.reveal", this.onModalClosed);
  },
  beforeDestroy() {
    $(this.$el).off("closed.zf.reveal", this.onModalClosed);
  }
});

그리고 템플릿은

<template id="modal-template">
  <div class="reveal" data-reveal>
    <div v-if="show">
      Stuff that is expensive to render
    </div>
    <button class="close-button" data-close aria-label="Close modal" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>

여기 작업 예가 있습니다.

언급URL : https://stackoverflow.com/questions/43687275/listen-for-foundation-event-in-vue-js