Files
Aether/frontend/src/composables/useConfirm.ts

112 lines
2.4 KiB
TypeScript
Raw Normal View History

2025-12-10 20:52:44 +08:00
import { ref } from 'vue'
export type ConfirmVariant = 'danger' | 'destructive' | 'warning' | 'info' | 'question'
export interface ConfirmOptions {
title?: string
message: string
confirmText?: string
cancelText?: string
variant?: ConfirmVariant
}
interface ConfirmState extends ConfirmOptions {
isOpen: boolean
resolve?: (value: boolean) => void
}
const state = ref<ConfirmState>({
isOpen: false,
message: '',
title: '确认操作',
confirmText: '确认',
cancelText: '取消',
variant: 'question'
})
export function useConfirm() {
/**
*
* @param options
* @returns Promise<boolean> - true表示确认false表示取消
*/
const confirm = (options: ConfirmOptions): Promise<boolean> => {
return new Promise((resolve) => {
state.value = {
isOpen: true,
title: options.title || '确认操作',
message: options.message,
confirmText: options.confirmText || '确认',
cancelText: options.cancelText || '取消',
variant: options.variant || 'question',
resolve
}
})
}
/**
* 便
*/
const confirmDanger = (message: string, title?: string, confirmText?: string): Promise<boolean> => {
2025-12-10 20:52:44 +08:00
return confirm({
message,
title: title || '危险操作',
confirmText: confirmText || '删除',
2025-12-10 20:52:44 +08:00
variant: 'danger'
})
}
/**
* 便
*/
const confirmWarning = (message: string, title?: string): Promise<boolean> => {
return confirm({
message,
title: title || '警告',
confirmText: '继续',
variant: 'warning'
})
}
/**
* 便
*/
const confirmInfo = (message: string, title?: string): Promise<boolean> => {
return confirm({
message,
title: title || '提示',
confirmText: '确定',
variant: 'info'
})
}
/**
*
*/
const handleConfirm = () => {
if (state.value.resolve) {
state.value.resolve(true)
}
state.value.isOpen = false
}
/**
*
*/
const handleCancel = () => {
if (state.value.resolve) {
state.value.resolve(false)
}
state.value.isOpen = false
}
return {
state,
confirm,
confirmDanger,
confirmWarning,
confirmInfo,
handleConfirm,
handleCancel
}
}