quasar dialog 활용하기

📒 dialog 입력 데이터 띄우기

components/test-diaog.vue

❓ onDialogOK(), onDialogCancel(), onDialogHide()
onDialogOK()는 dialog에서 OK버튼이 클릭되었을 때 호출되는 콜백 함수이다. 이는 사용자가 입련한 데이터를 전달하는 역할을 하기도 한다. 만약 헤딩 힘수가 없다면, dialog에서 OK를 눌렀을 때 아무런 동작을 하지 않을 것이다.
onDialogCancel()은 사용자가 작성한 양식을 취소하고 다이얼로그를 닫는 등의 작업을 수행하고, onDialogHide() 은 다이얼로그가 닫힐 때 발생하는 다양한 작업을 처리하기 위해 사용된다.

아래 코드는 dialog를 component화한 것이다. 이 내용은 quasar framework 홈페이지에 나와있는 내용이다.
onDialogOK()를 이용해 다이얼로그에서 입력한 데이터, id와 password를 담아준다.

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <q-card-section class="q-pa-md">
        <div class="q-gutter-md row">
          <div class="col">
            <q-input v-model="id" label="아이디" class="q-mb-md" />
          </div>
          <div class="col">
            <q-input v-model="password" label="비밀번호" class="q-mb-md" />
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn color="primary" label="OK" @click="onOKClick" />
        <q-btn color="primary" label="Cancel" @click="onDialogCancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { useDialogPluginComponent } from 'quasar';
import { ref } from 'vue';

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const id = ref('');
const password = ref('');

function onOKClick() {
  onDialogOK({ id: id.value, password: password.value });
}
</script>

pages/test-page.vue

onDialogOK()로 보낸 데이터를 onOK()에서 받아 화면에 뿌려준다.

<template>
  <q-page>
    <div class="q-pa-md q-gutter-sm">
      <q-btn label="Alert" color="primary" @click="openDialog()" />
      <div v-if="receivedData">ID: {{ receivedData.id }}</div>
      <div v-if="receivedData">PASSWORD: {{ receivedData.password }}</div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { ref } from 'vue';
import TestDialog from 'components/dialog/test-dialog.vue';

const $q = useQuasar();

interface Test {
  id: string;
  password: string;
}

const receivedData = ref<Test | null>(null);

const openDialog = () => {
  $q.dialog({
    component: TestDialog,
  })
    .onOk((data: Test) => {
      console.log('OK');
      receivedData.value = data;
    })
    .onCancel(() => {
      console.log('Cancel');
    })
    .onDismiss(() => {
      console.log('Called on OK or Cancel');
    });
};
</script>

📒 부모component에서 데이터 넘겨주기

components/test-diaog.vue

❓ defineProps()
defineProps() 함수는 Vue 3의 Composition API에서 사용되는 함수로, 부모 컴포넌트로부터 전달된 prop들을 명시적으로 정의하는 데 사용된다.이 함수를 사용하면 컴포넌트 내에서 props를 타입과 함께 명확하게 정의할 수 있다.
defineProps() 함수는 컴포넌트의 상태를 설정하는 것이 아니라, 컴포넌트에 전달된 데이터를 읽는 데 사용된다. 따라서 props를 수정하거나 재할당하는 것은 권장되지 않는다. 이 함수는 컴포넌트 내에서 prop을 읽고 사용할 때만 사용되어야 한다.

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <q-card-section class="q-pa-md">
        <div class="text-h6">{{ title }}</div>
        <div>{{ message }}</div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn color="primary" label="OK" @click="onOKClick" />
        <q-btn color="primary" label="Cancel" @click="onDialogCancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { useDialogPluginComponent } from 'quasar';

const props = defineProps({
  title: String,
  message: String,
});

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

function onOKClick() {
  onDialogOK();
}
</script>

pages/test-page.vue

아래 코드를 보면 $q.dialog() 아에서 componentProps를 통해 객체를 전달한 것을 확인할 수 있다. 이렇게 설정하면 $q.dialog()에 설정된 component, 즉 TestDialog로 데이터를 전달하게 된다.

<template>
  <q-page>
    <div class="q-pa-md q-gutter-sm">
      <q-btn label="Alert" color="primary" @click="openDialog()" />
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { ref } from 'vue';
import TestDialog from 'components/dialog/test-dialog.vue';
import { title } from 'process';

const $q = useQuasar();

interface Test {
  id: string;
  password: string;
}

const openDialog = () => {
  $q.dialog({
    component: TestDialog,
    componentProps: {
      title: '알림',
      message: '메세지가 도착했습니다.',
    },
  })
    .onOk(() => {
      console.log('OK');
    })
    .onCancel(() => {
      console.log('Cancel');
    })
    .onDismiss(() => {
      console.log('Called on OK or Cancel');
    });
};
</script>