useJdModalInterceptClose

useJdModalInterceptClose 은 modalRef 닫기(결과 전달)을 감지하기 위해 매번 반복될 수 있는 observer 구독 부분을 간단하게 콜백을 받을 수 있도록 제공하는 기능입니다.

Example.vueModal.vue

vue

<template>
  <div>
    <el-button type="primary" @click="onOpen">onOpen</el-button>
    <div class="result-list">
      <div v-for="(result, index) in resultPrint" :key="index" class="row">
        {{ result }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useJdModalService, useJdModalInterceptClose } from '@jood/v-modal';
import OpenModal from './OpenModal.vue';

const resultPrint = ref<{ dt: string; count: number }[]>([]);
const modalService = useJdModalService();
const interceptClose = useJdModalInterceptClose<{ count: number }>();

const onOpen = () => {
  const modalRef = modalService.open({
    component: OpenModal,
    overlayClose: true,
  });
  interceptClose.intercept(modalRef); // modalRef 닫기 이벤트를 감지합니다.
};

// modalRef 가 닫힐 때 실행될 콜백을 등록합니다.
interceptClose.onClosed((result) => {
  if (result && !isNaN(result.count)) {
    resultPrint.value.push({ dt: new Date().toLocaleString(), count: result.count });
  }
});
</script>

<style lang="scss" scoped>
.result-list {
  .row {
    margin: 2px;
    padding: 5px;
    border: 1px dashed #ccc;
  }
}
</style>

vue

<template>
  <div class="example-modal">
    <div class="body-panel">
      <el-input-number v-model="modalCount" />
    </div>
    <div class="foot-actions">
      <el-button @click="onCancel">취소</el-button>
      <div class="spacer"></div>
      <el-button type="primary" @click="onClose">확인</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useJdModalRef } from '@jood/v-modal';

const modalRef = useJdModalRef<{ count: number }>();
const modalCount = ref(0);

const onCancel = () => {
  modalRef.close();
};

const onClose = () => {
  modalRef.close({ count: modalCount.value });
};
</script>

<style lang="scss" scoped>
.example-modal {
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 95vw;
  max-width: 320px;
  min-height: 100%;
  box-sizing: border-box;
  .body-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
  }
  .foot-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    .spacer {
      flex: 1;
    }
  }
}
</style>

useJdModalInterceptClose ​

useJdModalInterceptClose