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

本文完。

相关推荐
2501_946244784 分钟前
Flutter & OpenHarmony OA系统设置页面组件开发指南
开发语言·javascript·flutter
cz追天之路25 分钟前
华为机考 ------ 识别有效的IP地址和掩码并进行分类统计
javascript·华为·typescript·node.js·ecmascript·less·css3
进击的野人29 分钟前
Vue Router 深度解析:从基础概念到高级应用实践
前端·vue.js·前端框架
北慕阳30 分钟前
健康管理前端记录
前端
1024小神31 分钟前
cloudflare的worker中的Environment环境变量和不同环境配置
前端
栀秋66639 分钟前
从零开始调用大模型:使用 OpenAI SDK 实现歌词生成,手把手实战指南
前端·llm·openai
l1t39 分钟前
DeepSeek总结的算法 X 与舞蹈链文章
前端·javascript·算法
智航GIS1 小时前
6.2 while循环
java·前端·python
2201_757830871 小时前
AOP核心概念
java·前端·数据库
雪人.1 小时前
JavaWeb经典面试题
java·服务器·前端·java面试题