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

本文完。

相关推荐
踩着两条虫7 小时前
VTJ:DSL语言规范
前端·低代码·ai编程
广州华水科技7 小时前
单北斗GNSS在水库形变监测中的应用与优势分析
前端
洲星河ZXH7 小时前
JavaWeb,前端工程化
前端
子兮曰7 小时前
独立开发者主流技术栈(2026最新)
前端·后端·全栈
踩着两条虫7 小时前
VTJ.PRO 新手入门:从环境搭建到 AI 生成首个 Vue3 应用
前端·javascript·数据库·vue.js·人工智能·低代码
十有八七7 小时前
Resume Agent P1 开发 — 记忆管理 + 用户配置 + 工具系统
前端·后端
他是龙5517 小时前
63:JS 加密断点调试与逆向实战
开发语言·javascript·状态模式
2601_949816168 小时前
Node.js npm 安装过程中 EBUSY 错误的分析与解决方案
前端·npm·node.js
2601_949194268 小时前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
pancakenut8 小时前
自定义属性:从html到react
前端