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

本文完。

相关推荐
图扑软件4 小时前
中篇・运笔|统一 DataModel 底座,HT UI 组件万物同源
javascript·低代码·ui·性能优化·数据可视化
a1117765 小时前
3D 脑图谱 / Bilingual 3D Brain Atlas 项目
前端
T1mzhou5 小时前
ARM64 Linux 6.10内核启动流程2-rootfs 怎么挂上
linux·服务器·前端
小小尚@5 小时前
WebGIS/ECharts 地图开发|MapLand 在线行政区划边界一键下载 GeoJSON 工具
前端·javascript·echarts
葡萄城技术团队6 小时前
工业数据可视化:使用活字格 AIcoding + Three.js 构建轻量化三维设备监控大屏
开发语言·javascript·信息可视化
默_笙6 小时前
🚍 一条 Todo 的奇幻漂流:TypeScript 全栈类型安全的"护照检查"
前端·javascript
计算机魔术师7 小时前
NVIDIA 以 129.3 亿美元收购 Hugging Face
前端
平头哥技术团队7 小时前
Day 01 | 用 HTML 写第一个网页:双击就能在浏览器打开
前端
weixin_422555427 小时前
el-menu子菜单点击就被激活,恢复之前的激活状态
javascript·vue.js·elementui
计算机魔术师8 小时前
两年翻45倍!英伟达靠买买买建成千亿投资帝国
前端