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

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

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

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

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

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

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

通过 add 和 update 方法添加和更新 toastOpts

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

本文完。

相关推荐
zach26 分钟前
Vue/React SPA 打包部署后,子路由刷新 401 未登录问题彻底解决
前端·nginx·next.js
旋生万物27 分钟前
素数螺旋映射 $z_n=n^{1+i}$ 的角分布统计检验与零模型对比
大数据·前端·人工智能·算法·云原生·螺旋生成论·螺旋相位
亿元程序员29 分钟前
游戏引擎都没用!纯AI又上线了一款蚂蚁搬家小游戏!
前端
福兮说36 分钟前
JS 正则的六个坑:带 g 的 test() 一真一假、空匹配死循环、replace 里的 $
开发语言·前端·javascript·正则表达式
miss37 分钟前
给规则引擎加一个拖拽画布:Vue Flow 单向投影 + 布局语义分离
javascript·vue.js·canvas
码艺-Alimjan40 分钟前
Web 网站打包桌面应用的另一种方式,超级简单(C# exe 33Kb)
开发语言·前端·c#
flash俊杰1 小时前
时间线到 filter_complex:把编辑文档编译成 FFmpeg 滤镜图
前端
Tyrvision1 小时前
新品发布前,三维动画怎么排期才不挤在最后一周?
前端
miss1 小时前
从零做一个可视化规则引擎:Vue3 递归条件树 + 双引擎结果对比
前端·vue.js·typescript
Daorigin_com1 小时前
道本科技携手DeepSeek:以AI重塑合同全生命周期管理
前端·人工智能·科技·网络安全·数据挖掘·前端框架·传媒