feat(ui): 添加全局Snackbar组件并替换局部实现
将原本分散在各组件的Snackbar功能统一为全局组件,通过Pinia store管理状态 移除CreateTemplateScreen中的局部Snackbar实现,改用全局组件 添加Snackbar store提供多种消息类型方法(success/error/warning/info)
This commit is contained in:
1 parent
55a85e7111
commit
ae20a30616
5 files changed
+191
-35
No files matched your search
@@ -0,0 +1,48 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export interface SnackbarAction {
|
||||
text: string
|
||||
color?: string
|
||||
handler?: () => void
|
||||
}
|
||||
|
||||
export const useSnackbarStore = defineStore('snackbar', () => {
|
||||
const isVisible = ref(false)
|
||||
const message = ref('')
|
||||
const color = ref('info')
|
||||
const timeout = ref(3000)
|
||||
const actions = ref<SnackbarAction[]>([])
|
||||
|
||||
const show = (msg: string, clr = 'info', tout = 3000, actionList: SnackbarAction[] = []) => {
|
||||
message.value = msg
|
||||
color.value = clr
|
||||
timeout.value = tout
|
||||
actions.value = actionList
|
||||
isVisible.value = true
|
||||
}
|
||||
|
||||
const success = (msg: string, tout = 3000) => show(msg, 'success', tout)
|
||||
const error = (msg: string, tout = 3000) => show(msg, 'error', tout)
|
||||
const warning = (msg: string, tout = 3000) => show(msg, 'warning', tout)
|
||||
const info = (msg: string, tout = 3000) => show(msg, 'info', tout)
|
||||
|
||||
const hide = () => {
|
||||
isVisible.value = false
|
||||
actions.value = []
|
||||
}
|
||||
|
||||
return {
|
||||
isVisible,
|
||||
message,
|
||||
color,
|
||||
timeout,
|
||||
actions,
|
||||
show,
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
info,
|
||||
hide
|
||||
}
|
||||
})
|
||||
Reference in new issue
Block a user