100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
|
|
// 定义 props
|
|
interface Props {
|
|
modelValue: boolean;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
confirmColor?: string;
|
|
dialogColor?: string;
|
|
showActions?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
confirmText: '确认',
|
|
cancelText: '取消',
|
|
confirmColor: 'primary',
|
|
dialogColor: 'white',
|
|
showActions: true,
|
|
});
|
|
|
|
// 定义 emits
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean];
|
|
'confirm': [];
|
|
'cancel': [];
|
|
}>();
|
|
|
|
// 本地状态
|
|
const dialogVisible = ref(props.modelValue);
|
|
|
|
// 监听 modelValue 的变化
|
|
watch(() => props.modelValue, (newValue) => {
|
|
dialogVisible.value = newValue;
|
|
});
|
|
|
|
// 监听本地状态变化并同步到父组件
|
|
watch(dialogVisible, (newValue) => {
|
|
emit('update:modelValue', newValue);
|
|
});
|
|
|
|
// 处理确认事件
|
|
const handleConfirm = () => {
|
|
emit('confirm');
|
|
dialogVisible.value = false;
|
|
};
|
|
|
|
// 处理取消事件
|
|
const handleCancel = () => {
|
|
emit('cancel');
|
|
dialogVisible.value = false;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog
|
|
v-model="dialogVisible"
|
|
max-width="450"
|
|
persistent
|
|
>
|
|
<v-card :color="dialogColor">
|
|
<v-card-title class="text-h6 white--text">
|
|
{{ title }}
|
|
</v-card-title>
|
|
<v-card-text class="pt-4">
|
|
{{ message }}
|
|
</v-card-text>
|
|
<v-card-actions v-if="showActions">
|
|
<v-spacer />
|
|
<v-btn
|
|
v-if="cancelText"
|
|
variant="text"
|
|
@click="handleCancel"
|
|
>
|
|
{{ cancelText }}
|
|
</v-btn>
|
|
<v-btn
|
|
:color="confirmColor"
|
|
variant="flat"
|
|
@click="handleConfirm"
|
|
>
|
|
{{ confirmText }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
<v-card-actions v-else>
|
|
<v-spacer />
|
|
<v-btn
|
|
:color="confirmColor"
|
|
variant="flat"
|
|
@click="handleConfirm"
|
|
>
|
|
{{ confirmText }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|