Nothing is impossible.

技术笔记与实践记录

‹ 返回文章列表

vue3自定义组件(1):函数式Message 全局提示

手写一个vue3-message消息通知组件:函数式全局提示,复制后配置好图片就可以直接使用。

vue
◷ 2年前 ◉ 958 ☁ 0

函数式 Message 的关键是把组件渲染和调用方式拆开。业务层只关心 Message.success 或 Message.error,内部负责创建容器、挂载组件和定时销毁。

Vue3 中可以使用 createVNode 与 render 来动态渲染组件,也可以把消息队列维护在一个响应式数组中,由统一的消息容器负责展示。

实现时要处理重复调用、离场动画、最大显示数量和销毁清理,避免页面切换后还残留 DOM 或定时器。