Dialog

Dialog는 사용자에게 중요한 메시지를 알리거나, 확인을 요청할 때 사용합니다. useDialog() 유틸을 통해 alert, confirm, checkbox, prompt 등의 팝업을 간편하게 호출할 수 있습니다.

TIP

• .onOk(()=>{}) : 확인 버튼 클릭시 실행
• .onCancel(()=>{}) : 취소 버튼 클릭시 실행

Confirm

• 확인/취소 버튼이 있는 팝업을 띄웁니다.
• 주로 페이지 이동이나 삭제 등 사용자의 확인이 필요한 작업에 사용합니다.

dialog.confirm('메세지', {옵션명:옵션})

기본 사용

<q-btn @click="confirm">confirm</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const confirm = () => {
        dialog.confirm('저장되지 않은 변경사항이 있습니다. 그래도 이동하시겠습니까?')
            .onOk(() => {
            })
            .onCancel(() => {
            });
    }
</script>

제목, 색상 변경

<q-btn @click="confirm2">confirm</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const confirm2 = () => {
        dialog.confirm('이 작업은 되돌릴 수 없습니다.', {
            title: '경고',
            color: 'red',
        })
        .onOk(() => {
            console.log('삭제');
        })
        .onCancel(() => {
            console.log('삭제 취소');
        });
    }
</script>

커스텀 버튼 텍스트

<q-btn @click="confirm3">confirm</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const confirm3 = () => {
        dialog.confirm('로그아웃 하시겠습니까?', {
            ok: {
                label: '로그아웃',
                color: 'primary'
            },
            cancel: {
                label: '취소',
                flat: true
            }
        })
        .onOk(() => {
            console.log('로그아웃');
        })
        .onCancel(() => {
            console.log('로그아웃 취소');
        });
    }
</script>

Alert

• 확인 버튼만 있는 단순 알림 팝업입니다.
• 주로 작업 완료 안내 등 간단한 메시지 출력에 사용합니다.

dialog.alert('메세지', {옵션명:옵션})

기본 사용

<q-btn @click="alert">alert</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const alert = () => {
        dialog.alert('저장되었습니다.')
    }
</script>

제목, 색상 변경

<q-btn @click="alert2">alert</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const alert2 = () => {
        dialog.alert('업데이트가 필요합니다.', { title: '경고', color: 'orange' })
        .onOk(() => {
            console.log('업데이트 경고 확인');
        });
    }
</script>

Checkbox

• 다중 항목 선택용 팝업입니다.
• 사용자는 여러 개의 항목을 선택할 수 있으며, 결과는 배열로 반환됩니다.

dialog.checkbox('메세지', '타이틀', [{label:'라벨', value:'값', disable:true or false}])

<q-btn @click="checkbox">checkbox</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const checkbox = () => {
        dialog.checkbox('선택할 항목을 고르세요', '항목 선택', [
            { label: '옵션 A', value: 'A' },
            { label: '옵션 B', value: 'B', disable: true },
            { label: '옵션 C', value: 'C' }
        ])
            .onOk((selected) => {
                console.log('선택된 항목:', selected);
            })
            .onCancel(() => {
                console.log('선택이 취소되었습니다');
            });
    }
</script>

Prompt

• 사용자 입력을 받을 수 있는 팝업입니다.
• 텍스트, 숫자, 비밀번호 등 다양한 타입을 받을 수 있습니다.

dialog.prompt('메세지', '타이틀', '타입')

기본 사용

<q-btn @click="prompt">prompt</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const prompt = () => {
        dialog.prompt('입력바랍니다')
            .onOk((value) => {
                console.log('사용자가 입력한 값:', value);
            })
            .onCancel(() => {
                console.log('입력이 취소되었습니다');
            });
    }
</script>

타입 변경

<q-btn @click="prompt2">prompt</q-btn>

<script setup>
    import useDialog from 'src/components/composables/usePopupUtil';

    const dialog = useDialog();

    const prompt2 = () => {
        dialog.prompt('비밀번호를 입력해주세요', '비밀번호 입력', 'password')
            .onOk((password) => {
                console.log('비밀번호:', password);
            });
    }
</script>

Toast

• 사용자에게 간단한 피드백이나 정보를 잠깐 보여주는 메시지입니다.
• 저장 완료, 삭제됨, 네트워크 오류 등을 알릴 때 사용합니다.
• 이 컴포넌트의 자세한 내용은 공식문서를 참고하세요.

<q-btn @click="toast">Toast</q-btn>

<script setup>
    import { useQuasar } from 'quasar';

    const $q = useQuasar();

    const toast = () => {
        $q.notify({
            message: '메세지입니다',
            color: 'purple'
        })
    }
</script>