Dialog 구현 방법

 

 

<template>
     <q-dialog :model-value="modelValue" @update:model-value="(val) => $emit('update:modelValue')"
        @hide="changeViewMoed('SignInForm')">
      <q-card :style="{width : '400px'}">
        <q-card-section class="flex justify-end">           
           <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>

            <q-card-section class="q-px-xl q-pb-xl">
            <component :is="authViewComponents[viewMode]" @change-view="changeViewMoed" />

            <!-- v-if를 활용한 조건부 렌더링 -->
            <!-- <SignInFrom v-if="viewMode == 'SignInFrom'" @change-view="changeViewMoed"/>
            <SignUpFrom v-else-if="viewMode == 'SignUpFrom'" @change-view="changeViewMoed"/>
            <FindPasswordFrom v-else-if="viewMode == 'FindPasswordFrom'" @change-view="changeViewMoed"/> -->

            </q-card-section>
        </q-card>
    </q-dialog>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';
// import SignInForm from './SignInForm.vue';
// import SignUpForm from './SignUpForm.vue';
// import FindPasswordForm from './FindPasswordForm.vue';

defineProps({
    modelValue : {
        type : Boolean,
        default : false,
    }
})

defineEmits(['update:modelValue'])

const viewMode = ref('SignInForm'); 
const changeViewMoed = (mode) => {
    console.log(mode);
    viewMode.value = mode;    
}

// const authViewComponents = {
//     SignInForm,
//     SignUpForm,
//     FindPasswordForm
// }

const authViewComponents = {
    SignInForm: defineAsyncComponent(() => import('./SignInForm.vue')),
    SignUpForm: defineAsyncComponent(() => import('./SignUpForm.vue')),
    FindPasswordForm: defineAsyncComponent(() => import('./FindPasswordForm.vue'))
    }
</script>

<style lang="scss" scoped>


</style>