90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<template>
|
|
<q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
|
|
<q-card class="q-pa-sm">
|
|
<q-card-section class="row">
|
|
<div class="q-pr-md">
|
|
<q-avatar
|
|
:icon="icon"
|
|
size="lg"
|
|
font-size="25px"
|
|
color="blue-1"
|
|
:text-color="color"
|
|
/>
|
|
</div>
|
|
<div class="col text-dark">
|
|
<span class="text-bold">{{ title }}</span>
|
|
<br />
|
|
<span>{{ message }}</span>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-actions
|
|
align="right"
|
|
class="bg-white text-teal"
|
|
v-if="onlycancel"
|
|
>
|
|
<q-btn label="ตกลง" flat color="grey-8" @click="onDialogCancel" />
|
|
<!-- <q-btn :label="textOk" :color="color" @click="onOKClick" /> -->
|
|
</q-card-actions>
|
|
<q-card-actions align="right" class="bg-white text-teal" v-else>
|
|
<q-btn label="ยกเลิก" flat color="grey-8" @click="onDialogCancel" />
|
|
<q-btn :label="textOk" :color="color" @click="onOKClick" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useDialogPluginComponent } from "quasar";
|
|
|
|
const props = defineProps({
|
|
color: {
|
|
type: String,
|
|
default: "primary",
|
|
},
|
|
textOk: {
|
|
type: String,
|
|
default: "ตกลง",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "หัวข้อ?",
|
|
},
|
|
message: {
|
|
type: String,
|
|
default: "ข้อความ",
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: "question_mark",
|
|
},
|
|
onlycancel: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
defineEmits([
|
|
// REQUIRED; need to specify some events that your
|
|
// component will emit through useDialogPluginComponent()
|
|
...useDialogPluginComponent.emits,
|
|
]);
|
|
|
|
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
|
|
useDialogPluginComponent();
|
|
// dialogRef - Vue ref to be applied to QDialog
|
|
// onDialogHide - Function to be used as handler for @hide on QDialog
|
|
// onDialogOK - Function to call to settle dialog with "ok" outcome
|
|
// example: onDialogOK() - no payload
|
|
// example: onDialogOK({ /*...*/ }) - with payload
|
|
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
|
|
|
|
// this is part of our example (so not required)
|
|
function onOKClick() {
|
|
// on OK, it is REQUIRED to
|
|
// call onDialogOK (with optional payload)
|
|
onDialogOK();
|
|
// or with payload: onDialogOK({ ... })
|
|
// ...and it will also hide the dialog automatically
|
|
}
|
|
</script>
|