SEMI DESIGN 源码学习(五)工具提示

Toast 组件位于 packages/semi-ui/toast/index.tsx

文件默认导出一个 ToastList 类,实际项目中使用的是这个 ToastList 类的静态方法 info, warning, error, success

而他们是由 create 方法创建,这个方法判断页面中是否有 ToastList 组件,没有则新建一个 ToastList,否则直接在现有 ToastList 添加元素。

添加,删除,更新这些操作使用 foundation 进行,这个 foundation 属性是 ToastList 的核心。

在构造器方法看到 foundation 属性是一个接受一个 adapterToastListFoundation 实例,需要看看这个 ToastListFoundation 是啥。

ToastListFoundation 实际上维护的是数组 ToastList.state.list

通过 addupdate 方法添加和更新 toastOpts

最后这个数组的数据用于 ToastListrender 方法渲染每一个 Toast

本文完。

相关推荐
树上有只程序猿12 分钟前
2026低代码选型指南,主流低代码开发平台排名出炉
前端·后端
橙某人20 分钟前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
高端章鱼哥33 分钟前
为什么说用OpenClaw对打工人来说“不划算”
前端·后端
大脸怪33 分钟前
告别 F12!前端开发者必备:一键管理 localStorage / Cookie / SessionStorage 神器
前端·后端·浏览器
Mr_Mao40 分钟前
我受够了混乱的 API 代码,所以我写了个框架
前端·api
小徐_233341 分钟前
向日葵 x AI:把远程控制封装成 MCP,让 AI 替我远程控制设备
前端·人工智能
boooooooom41 分钟前
讲清 Proxy + effect + track/trigger 流程
javascript·vue.js·面试
冴羽43 分钟前
来自顶级大佬 TypeScript 之父的 7 个启示
前端·typescript
leafyyuki1 小时前
在 Vue 项目中玩转 FullCalendar:从零搭建可交互的事件日历
前端·javascript·vue.js
决斗小饼干1 小时前
低代码平台工作流引擎设计:从状态机到智能流转的技术演进
前端·低代码·工作流引擎