62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
// message.ts
|
||
import { createApp } from 'vue'
|
||
import type { App } from 'vue'
|
||
import { provide, inject } from 'vue' // 新增导入
|
||
import type { InjectionKey } from 'vue'
|
||
|
||
import Message from './Message.vue'
|
||
|
||
interface MessageOptions {
|
||
message: string
|
||
type: 'success' | 'error'
|
||
duration?: number
|
||
}
|
||
|
||
const messageInstances: any[] = [] // 存储多个消息实例，防止重叠
|
||
|
||
const showMessage = (options: MessageOptions) => {
|
||
const app = createApp(Message, {
|
||
...options,
|
||
onClose: () => {
|
||
app.unmount()
|
||
const index = messageInstances.indexOf(app)
|
||
if (index > -1) messageInstances.splice(index, 1)
|
||
container.remove()
|
||
}
|
||
})
|
||
|
||
const container = document.createElement('div')
|
||
document.body.appendChild(container)
|
||
app.mount(container)
|
||
|
||
messageInstances.push(app)
|
||
}
|
||
|
||
// 定义 InjectionKey（TypeScript 类型安全）
|
||
const MessageKey: InjectionKey<{
|
||
success: (message: string, duration?: number) => void
|
||
error: (message: string, duration?: number) => void
|
||
}> = Symbol('message')
|
||
|
||
// 插件安装
|
||
const messagePlugin = {
|
||
install(app: App) {
|
||
const message = {
|
||
success: (message: string, duration?: number) =>
|
||
showMessage({ message, type: 'success', duration }),
|
||
error: (message: string, duration?: number) =>
|
||
showMessage({ message, type: 'error', duration })
|
||
}
|
||
app.provide(MessageKey, message) // 使用 provide 注入
|
||
}
|
||
}
|
||
|
||
// 新增：composable 函数，用于在组件中注入
|
||
export const useMessage = () => {
|
||
const message = inject(MessageKey)
|
||
if (!message) throw new Error('useMessage must be used after messagePlugin is installed')
|
||
return message
|
||
}
|
||
|
||
export default messagePlugin
|