函数式 Message 的关键是把组件渲染和调用方式拆开。业务层只关心 Message.success 或 Message.error,内部负责创建容器、挂载组件和定时销毁。
Vue3 中可以使用 createVNode 与 render 来动态渲染组件,也可以把消息队列维护在一个响应式数组中,由统一的消息容器负责展示。
实现时要处理重复调用、离场动画、最大显示数量和销毁清理,避免页面切换后还残留 DOM 或定时器。
技术笔记与实践记录
手写一个vue3-message消息通知组件:函数式全局提示,复制后配置好图片就可以直接使用。
函数式 Message 的关键是把组件渲染和调用方式拆开。业务层只关心 Message.success 或 Message.error,内部负责创建容器、挂载组件和定时销毁。
Vue3 中可以使用 createVNode 与 render 来动态渲染组件,也可以把消息队列维护在一个响应式数组中,由统一的消息容器负责展示。
实现时要处理重复调用、离场动画、最大显示数量和销毁清理,避免页面切换后还残留 DOM 或定时器。