간단한 사용법 및 구성

📣 NOTE

예제를 보기 좋게 하기 위해 버튼과 같은 UI 는 element-plus 가 사용되었습니다.

아래는 아주 간단한 모달을 여는 예제 입니다.

예제

• useJdModalService 를 통해 서비스(JdModalService)를 사용할 수 있습니다.
• useJdModalRef 를 통해 모달 참조자(JdModalRef)를 사용할 수 있습니다.

📣 useJdModalRef

열린 모달 컴포넌트와 그 하위 계층에서는 useJdModalRef 를 사용하여 JdModalRef 인스턴스를 사용할 수 있습니다. JdModalRef 는 모달 인스턴스로 전달된 모든 정보(data)를 관리하며, 모달을 닫는(close) 등 모달이 해야할 일을 관리하는 객체입니다.

ExamplePage.vue

<template>
  <div class="example">
    <el-button type="primary" @click="onOpen">Modal open</el-button>
  </div>
</template>

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

const modalService = useJdModalService();

const onOpen = () => {
  modalService.open({
    component: ExampleModal,
    overlayClose: true,
  });
};
</script>

ExampleModal.vue

<template>
  <div class="example-modal">
    <div class="message">안녕하세요!</div>
    <el-button type="danger" @click="onClose">Modal close</el-button>
  </div>
</template>

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

const modalRef = useJdModalRef();

const onClose = () => {
  modalRef.close();
};
</script>

<style lang="scss" scoped>
.example-modal {
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 90vw;
  max-width: 320px;
  box-sizing: border-box;
  .message {
    padding: 20px 5px 40px 5px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
  }
}
</style>

JdModalService

모달을 열고, 전체 모달을 관리하는 핵심 서비스 입니다.

Page.vue

import SomeModal from './SomeModal.vue';

const modalService = useJdModalService();
const onOpen = () => {
  modalService.open({
    component: SomeModal,
    data: { foo: 'bar' },
    overlayClose: true
  });
};

JdModalRef

하나의 모달을 관리하는 핵심 객체 입니다.

SomeModal.vue

const modalRef = useJdModalRef();
// console.log(modalRef.data); // { foo: 'bar' }
const onClose = () => {
  modalRef.close(); // 모달을 열었던 곳으로 결과를 전달 할 수도 있습니다.
};

계층 구조

위의 ExampleModal.vue 는 아래와 같은 구조로 열리게 되며, 해당 컴포넌트를 포함한 하위 컴포넌트에서는 useJdModalRef 를 사용할 수 있게 됩니다. (useJdModalService 역시 사용 가능합니다. 😀)

ExamplePage.vue

• Modal open 👇

JdModalProvider.vue

• 이 컴포넌트는 모달 서비스의 상태를 관찰하며 모달의 렌더링을 관리합니다.

JdModalEntry.vue

• 이 컴포넌트는 모달의 애니메이션과 overlayClose 처리 등 기본 구현이 포함됩니다.
• 가장 중요한 JdModalRef 의 주입(provide)을 담당합니다.

ExampleModal.vue

• 서비스를 통해 열린 모달 컴포넌트 입니다.
• 이 컴포넌트와 하위 계층에서는 useJdModalRef 를 통해 JdModalRef 를 사용할 수 있습니다.