EntryComponent

entryComponent 는 모달의 스타일링과 관리를 위해 모달 컴포넌트를 감싸는 컴포넌트 입니다.

@jood/v-modal 은 기본적으로 흰 배경에 라운드가 적용되어 있는 Entry 컴포넌트가 있고, 디자인 스타일링 위해 배경과 라운드를 제거한 JdModalEntryEmpty.vue 를 별도로 제공합니다.

useJdModalEntrySetup composables 를 노출하기 때문에 Entry 컴포넌트를 직접 만들고 적용할 수도 있습니다. Entry 컴포넌트는 필수로 해줘야 하는 일들이 있기 때문에 자체 구성하기 쉽지 않겠지만, 자체 구성할 일이 있다면 아래 예제 코드를 참고하세요.

모달 스타일링을 위해서는 OpenStrategy 가 더 나은 방법입니다.

Entry 컴포넌트는 아주 기본적인 스타일링만을 다루고 관리하기 위한 용도입니다.
OpenStrategy 를 사용하면 제공되는 JdModalEntryEmpty.vue 와 동일하게 스타일링이 가능하기도 하고 더 세부적인 스타일링과 애니메이션까지 제어할 수 있습니다. (아래 예제는 OpenStrategy 로 동일하게 만들 수 있습니다)

Entry 컴포넌트를 변경하는 건 모달의 계층 구조나 기본 이벤트 제어를 변경해야 할 때 유용합니다.

Page.vueEntryCustom1.vue

vue

<template>
  <div class="example">
    <div class="actions">
      <el-button type="primary" @click="onOpen">Defaut</el-button>
      <el-button type="primary" @click="onOpen2">JdModalEntryEmpty</el-button>
      <el-button type="primary" @click="onOpen3">Custom</el-button>
    </div>
  </div>
</template>

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

const modalService = useJdModalService();

const onOpen = () => {
  modalService.open({
    component: OpenModal,
    overlayClose: true,
  });
};

const onOpen2 = () => {
  modalService.open({
    component: OpenModal,
    entryComponent: JdModalEntryEmpty,
    overlayClose: true,
    disableShadow: true,
  });
};

const onOpen3 = () => {
  modalService.open({
    component: OpenModal,
    entryComponent: EntryCustom1,
    overlayClose: true,
    disableShadow: true,
  });
};
</script>

vue

<template>
  <div ref="refModalContainer" class="entry-empty" :class="classes" :style="styles.modal" tabindex="0">
    <div class="overlay" :style="styles.overlay" @touchmove="onOverlayTouchMove" @click="onOverlayClick"></div>
    <div ref="refModalPanel" class="panel" :style="styles.panel">
      <div class="pivot" :style="styles.pivot">
        <div class="content" :style="styles.content">
          <component :is="modalRef.component"></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { JdModalRef, useJdModalEntrySetup } from '@jood/v-modal';
import { onMounted, onUnmounted, watch } from 'vue';

const props = defineProps({
  index: {
    type: Number,
    default: 0,
  },
  modalRef: {
    type: JdModalRef,
    default: null,
  },
});

const { mounted, unmounted, setIndex, onOverlayClick, onOverlayTouchMove, refModalContainer, refModalPanel, classes, styles } =
  useJdModalEntrySetup({
    index: props.index,
    modalRef: props.modalRef,
  });

watch(() => props.index, setIndex);

onMounted(() => {
  mounted();
});

onUnmounted(() => {
  unmounted();
});
</script>

<style lang="scss" scoped>
.entry-empty {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  pointer-events: initial;
  > .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 1);
    transition: opacity 100ms;
    opacity: 0;
  }
  > .panel {
    position: relative;
    display: flex;
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    > .pivot {
      display: flex;
      transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms;
      border-radius: 20px;
      border: 6px solid #444;
      background: #fff;
      > .content {
        position: relative;
        overflow: auto;
        box-sizing: border-box;
      }
    }
  }
  &.full-height {
    > .panel {
      height: 100%;
    }
  }
}
</style>

defaultEntryComponent

전체를 기본으로 JdModalEntryEmpty.vue 로 적용하는 예시 입니다.

App.vue

import { provideJdModalService, JdModalEntryEmpty } from '@jood/v-modal';
const modalService = provideJdModalService();

onBeforeMount(() => {
  modalService.setUseHistoryStrategy(false);
  modalService.setUseBlockBodyScroll(true);
  modalService.init({
    defaultEntryComponent: JdModalEntryEmpty
  });
});

특정 페이지에서만 JdModalEntryEmpty.vue 로 적용하는 예시 입니다.

Page.vue

import { useJdModalService, JdModalEntryEmpty } from '@jood/v-modal';
const modalService = useJdModalService();

onBeforeMount(() => {
  modalService.setDefaltEntryComponent(JdModalEntryEmpty);
});

onBeforeUnmount(() => {
  modalService.resetDefaultEntryComponent();
})

EntryComponent ​

defaultEntryComponent ​

EntryComponent

defaultEntryComponent