smartERPLite Vue Document

Appearance

Return to top
On this page

Modal

VmModal

모달은 팝업 프로그램을 화면에 팝업 형태로 열고 닫는 처리를 한다.

<template>에서 VmModal의 내부에 팝업 프로그램 코드를 작성한다.
VmModal에는 ref="vmModalRef"로 template-ref 변수를 선언한다.

<script>에서 const vmModalRef = ref<InstanceType<typeof VmModal>>()로 선언한다.

팝업을 열고 닫는 함수 open과 close를 작성한다.

vue3의 template ref 가이드 참조

팝업 프로그램

  • 팝업의 공통사항

    • 팝업 프로그램의 파일명은 반드시 Popup.vue로 끝나도록 한다.

    • 팝업은 최상단 헤더에 왼쪽에는 팝업 타이틀, 오른쪽에는 닫기 버튼(X 아이콘)이 배치된다.

    • 팝업의 최하단 푸터에 조회, 저장 등의 기능 버튼을 배치한다.

    • PopupSetting

      • 모든 팝업 프로그램은 타이틀, VmPopup에서 사용할 값, 크기 등의 설정을 한다.
      • <script setup>에는 팝업 프로그램 로직을 작성하고 PopupSetting은 새로운 <script lang="ts">에 작성하고 defineComponent에 설정한다.
      • setupDynamicComponent.ts에서 PopupSetting에 컴포넌트이름을 popupName으로 입력하고 usePopupSettingMap()으로 등록한다.
      • VmPopup에서 usePopupSettingMap()으로 꺼내서 해당 팝업의 조회기능을 처리한다.

    • 사이즈

      • 팝업의 가로와 세로 사이즈는 모든 내용을 스크롤 없이 표시할 수 있도록 한다.
      • 가로 사이즈는 기본값이 auto로 VmModal 내부의 내용에 맞춰서 자동으로 맞춰지도록 한다.
      • 세로 사이즈는 기본값이 90%로 그리드가 있으면 최대 높이로 늘어 나도록 한다. 그리드가 없고 세로 사이즈가 고정적이면 PopupSetting에 height를 설정한다.

  • 팝업 사용

Modal & Popup Types

  • 팝업 작성 순서

    • template

      1. 팝업 프로그램의 내용을 VmModal 컴포넌트로 감싼다. ref="vmModalRef" 를 설정한다.
      2. 팝업의 상단 좌측에 위치할 제목을 #header-title의 slot으로 작성한다.
      3. 팝업의 하단 우측에 위치할 버튼을 #footer의 slot으로 작성한다.

    • script

      1. VmModal에 사용할 ref 변수는 이름이 vmModalRef 으로 한다.
      2. ref()의 타입은 InstanceType<typeof VmModal> 으로 한다.
      3. 팝업 프로그램의 open 함수에서는 VmModal의 open 함수를 호출하면서 반환한다.
      4. 팝업 프로그램의 값을 적용 시키는 함수에서 VmModal의 close 함수에 결과를 파라미터로하여 호출한다.
      5. </script> 바로위에 타입 선언 없이 defineExpose({open}) 만 추가한다.

SamplePopup.vue 

  <template>
    <VmModal ref="vmModalRef">
      <template #header-title>{{ popupSetting.title }}</template>
      <template #footer>
        <VmButtonQuery @click="query">조회</VmButtonQuery>
        <VmButton @click="apply">확인</VmButton>
      </template>

      팝업 프로그램
    </VmModal>
  </template>

  <!-- 
  <script setup> can be used alongside normal <script>. 
  A normal <script> may be needed in cases where we need to:
    * Declare options that cannot be expressed in <script setup>, 
      for example inheritAttrs or custom options enabled via plugins.
    * Declaring named exports.
    * Run side effects or create objects that should only execute once. 
  -->
  <script lang="ts">
  // @ts-ignore
  import { defineComponent } from 'vue'

  // 현재 파일과 VmPopup에서 사용할 수 있게 팝업세팅 설정
  const popupSetting: PopupSetting = {
    title: '샘플_사용자조회',
    url: '/userSearchPopupSample/query',
    code: 'userId',
    name: 'userNm',
    width: '800px'
  }
  export default defineComponent({
    popupSetting,
  })
  </script>


  <script setup lang="ts">
  import { VmModal } from '@/core'
  const vmModalRef = ref<InstanceType<typeof VmModal>>()

  function open(param?: any) {
    return vmModalRef.value?.open()
  }

  defineExpose({open})

  </script>

팝업 프로그램의 사용

  1. 공통팝업 화면에 코드와 이름이 노출되는 팝업은 VmPopup을 이용한다.

  2. 해당 프로그램에서만 사용되는 팝업은 화면에 노출되지 않는 팝업은 template 최하단에 VmModalComp로 작성 해두고 script에서 open한다. popupOpen함수는 async/await 패턴으로 작성해서 팝업이 닫히면 결과 처리를 하도록 한다.

<template>
  <VmModalComp SamplePopup ref="samplePopupRef"/>
</template>

<script>
import { VmModalComp } from '@/core'
const samplePopupRef = ref<InstanceType<typeof VmModalComp>>()

async function popupOpen() {
  const popupParam = {
  }
  const popupResult = await samplePopupRef.value?.open(popupParam)

  console.log(popupResult)
}
</script>

Hello

Copyright © 2022 SmartBiz