feat: 添加全局确认对话框管理器,重构对话框服务,优化用户交互体验

This commit is contained in:
zhanggy committed 2025-10-28 16:34:42 +08:00
1 parent 4367fd6ed1
commit 562e4f5b9e
9 files changed
+543 -11

No files matched your search

+85
View File
@@ -0,0 +1,85 @@
<template>
<v-dialog
v-model="dialogVisible"
max-width="450"
persistent
>
<v-card>
<v-card-title class="text-h6">
{{ title }}
</v-card-title>
<v-card-text>
{{ message }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
@click="handleCancel"
variant="text"
>
{{ cancelText }}
</v-btn>
<v-btn
@click="handleConfirm"
:color="confirmColor"
variant="flat"
>
{{ confirmText }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
// 定义 props
interface Props {
modelValue: boolean
title?: string
message: string
confirmText?: string
cancelText?: string
confirmColor?: string
}
const props = withDefaults(defineProps<Props>(), {
title: '确认',
confirmText: '确认',
cancelText: '取消',
confirmColor: 'primary'
})
// 定义 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>