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

本文完。

相关推荐
Cache技术分享2 分钟前
261. Java 集合 - Java 开发必备:ArrayList 与 LinkedList 的选择攻略
前端·后端
涔溪3 分钟前
深入了解 Node.js 性能诊断工具 Clinic.js 的底层工作原理
开发语言·javascript·node.js
Neptune14 分钟前
js防抖技术:从原理到实践,如何解决高频事件导致的性能难题
前端·javascript
是你的小橘呀4 分钟前
从爬楼梯到算斐波那契,我终于弄懂了递归和动态规划这俩 "磨人精"
前端·javascript·面试
m0_740043735 分钟前
Vuex中commit和dispatch的核心区别
前端·javascript·html
草字19 分钟前
css 按钮的脉冲光环动画,强调动画。
前端·css
BD_Marathon21 分钟前
【JavaWeb】CSS_三大选择器
前端·css
jump68025 分钟前
柯里化
前端
NeoInfra25 分钟前
全面解读ThinkPHP 5.0:现代PHP框架的架构演进与安全实践
前端
一 乐27 分钟前
宠物店管理|基于Java+vue的宠物猫店管理管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端