Skip to content
On this page

Modal

VmModal

모달은 팝업 프로그램을 화면에 오픈하고 닫는 기능을 한다.

팝업 프로그램은 VmModal의 slot으로 팝업 프로그램 코드를 작성한다.
template-ref 변수를 선언해서 팝업이 열릴때 open, 닫힐때 close 함수를 호출한다.

팝업 프로그램 작성 가이드

vue3의 template ref 가이드

VmModalComp

화면에 입력이 표시 되지않고, 함수로 오픈되는 팝업을 선언한다.

<template>
  <VmButton @click="openSamplePopup">샘플팝업열기</VmButton>
  <VmModalComp SamplePopup ref="samplePopupRef">
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { VmModalComp } from '@/core'
const samplePopupRef = ref<InstanceType<typeof VmModalComp>>()
async function openSamplePopup() {
  const param = {
    iAm: 'sample'
  }
  const result = await samplePopupRef.value?.open(param)
}
</script>

Hello