feat: 添加全局确认对话框管理器,重构对话框服务,优化用户交互体验
This commit is contained in:
1 parent
4367fd6ed1
commit
562e4f5b9e
9 files changed
+543
-11
No files matched your search
@@ -0,0 +1,99 @@
|
||||
<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-spacer>
|
||||
<v-btn
|
||||
v-if="cancelText"
|
||||
@click="handleCancel"
|
||||
variant="text"
|
||||
>
|
||||
{{ cancelText }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
@click="handleConfirm"
|
||||
:color="confirmColor"
|
||||
variant="flat"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-actions v-else>
|
||||
<v-spacer></v-spacer>
|
||||
<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
|
||||
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>
|
||||
Reference in new issue
Block a user