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

本文完。

相关推荐
eason_fan20 小时前
什么是模块联邦?(Module Federation)
前端·javascript·前端工程化
J总裁的小芒果20 小时前
el-table 假数据合并
javascript·vue.js·elementui
VX:Fegn089520 小时前
计算机毕设|基springboot+Vue的校园打印系统设计与实现
java·前端·javascript·vue.js·spring boot·后端·课程设计
W.Y.B.G20 小时前
vue3项目中集成天地图使用示例
android·前端
m***119020 小时前
【前端】Node.js使用教程
前端·node.js·vim
QianhangQianping20 小时前
前端技术迭代深析:从 CSS 布局到状态管理的进化之路
前端·css
阿道夫小狮子20 小时前
Android 反射
android·前端·javascript
特级业务专家20 小时前
写埋点、扒 SDK、改框架:JS 函数复写 10 连招实战手册
前端