File size: 2,396 Bytes
8ede856 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <template>
<v-dialog v-model="isOpen" max-width="480" persistent>
<v-card>
<v-card-title class="dialog-title d-flex align-center justify-space-between">
<span>{{ title }}</span>
<v-btn icon="mdi-close" variant="text" @click="handleClose"></v-btn>
</v-card-title>
<v-card-text>
<div class="message-text">{{ message }}</div>
<div class="action-hints">
<span class="hint-item">{{ confirmHint }}</span>
<span class="hint-item">{{ cancelHint }}</span>
<span class="hint-item">{{ closeHint }}</span>
</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="gray" @click="handleCancel">{{ t('core.common.dialog.cancelButton') }}</v-btn>
<v-btn color="red" @click="handleConfirm" class="confirm-button">{{ t('core.common.dialog.confirmButton') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup>
import { ref } from "vue";
import { useI18n } from '@/i18n/composables';
const { t } = useI18n();
const isOpen = ref(false);
const title = ref("");
const message = ref("");
const confirmHint = ref("");
const cancelHint = ref("");
const closeHint = ref("");
let resolvePromise = null;
const open = (options) => {
title.value = options.title || t('core.common.dialog.confirmTitle');
message.value = options.message || t('core.common.dialog.confirmMessage');
confirmHint.value = options.confirmHint || "";
cancelHint.value = options.cancelHint || "";
closeHint.value = options.closeHint || "";
isOpen.value = true;
return new Promise((resolve) => {
resolvePromise = resolve;
});
};
const handleConfirm = () => {
isOpen.value = false;
if (resolvePromise) resolvePromise(true);
};
const handleCancel = () => {
isOpen.value = false;
if (resolvePromise) resolvePromise(false);
};
const handleClose = () => {
isOpen.value = false;
if (resolvePromise) resolvePromise('close');
};
defineExpose({ open });
</script>
<style scoped>
.message-text {
margin-bottom: 8px;
line-height: 1.5;
font-size: 16px;
font-weight: 600;
}
.action-hints {
display: flex;
gap: 15px;
}
.hint-item {
color: var(--v-theme-secondaryText, #666);
font-size: 12px;
opacity: 0.7;
}
.dialog-title {
font-size: 20px;
font-weight: 500;
}
.confirm-button {
color: rgb(239, 68, 68);
}
</style>
|