Confirm Dialog

Confirm Dialog 은 사용자의 중요한 결정을 요구하는 경우에 사용되며, OverlayMask를 사용하여 모달 방식으로 동작합니다.

Basic

<script setup lang="ts">
import {
    Btn,
    ICON_TYPE,
    OverlayMask,
    ConfirmDialog,
} from '@jennifersoft/vue-components-v2';
const showSaveDialog = ref(false);
const showDeleteDialog = ref(false);
const showNoIconDialog = ref(false);

const showSaveConfirm = () => {
    showSaveDialog.value = true;
};

const hideSaveConfirm = () => {
    showSaveDialog.value = false;
};

const showDeleteConfirm = () => {
    showDeleteDialog.value = true;
};

const hideDeleteConfirm = () => {
    showDeleteDialog.value = false;
};

const showNoIconConfirm = () => {
    showNoIconDialog.value = true;
};

const hideNoIconConfirm = () => {
    showNoIconDialog.value = false;
};
</script>
<template>
    <overlay-mask v-if="showSaveDialog">
        <confirm-dialog
            :icon-props="{ icon: ICON_TYPE.caution3, type: 'default' }"
            @close="hideSaveConfirm()"
        >
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>편집중인 대시보드의 차트, 상단바 정보가 삭제됩니다.</div>
                <div>정말로 새로운 대시보드로 구성 하시겠습니까?</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideSaveConfirm()" />
                <btn
                    type="primary-filled"
                    text="적용"
                    @click="hideSaveConfirm()"
                />
            </template>
        </confirm-dialog>
    </overlay-mask>
    <overlay-mask v-if="showDeleteDialog">
        <confirm-dialog
            :icon-props="{ icon: ICON_TYPE.cancel, type: 'error' }"
            @close="hideDeleteConfirm()"
        >
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>정말 삭제하시겠습니까?</div>
                <div>대시보드가 삭제되면 복구할 수 없습니다.</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideDeleteConfirm()" />
                <btn
                    type="error-filled"
                    text="적용"
                    @click="hideDeleteConfirm()"
                />
            </template>
        </confirm-dialog>
    </overlay-mask>
    <overlay-mask v-if="showNoIconDialog">
        <confirm-dialog @close="hideNoIconConfirm()">
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>정말 삭제하시겠습니까?</div>
                <div>대시보드가 삭제되면 복구할 수 없습니다.</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideNoIconConfirm()" />
                <btn type="outlined" text="적용" @click="hideNoIconConfirm()" />
            </template>
        </confirm-dialog>
    </overlay-mask>
</template>

API

Props

Name	Type	Description
iconProps?	{icon: iconTypes, type: 'default', 'primary', 'warning','error'}	다이얼로그 상단 좌측 위치한 아이콘 정보 입니다. 아이콘이 없다면 없는 레이아웃으로 표시됩니다.