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

本文完。

相关推荐
余人于RenYu21 小时前
Claude + Figma MCP
前端·ui·ai·figma
杨艺韬1 天前
vite内核解析-第2章 架构总览
前端·vite
我是伪码农1 天前
外卖餐具智能推荐
linux·服务器·前端
2401_885885041 天前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢02111 天前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha1 天前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌1 天前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊1 天前
原生form发起表单干了啥
前端
剪刀石头布啊1 天前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静1 天前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程