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

本文完。

相关推荐
用户47949283569151 分钟前
XSS、CSRF、CSP、HttpOnly 全扫盲:前端安全不只是后端的事
前端·后端·面试
O***p6043 分钟前
当“前端虚拟化”成为可能:构建下一代 Web 应用的新范式
前端
孤酒独酌18 分钟前
一次断网重连引发的「模块加载缓存」攻坚战
前端
jinzeming99922 分钟前
Vue3 PDF 预览组件设计与实现分析
前端
NuLL23 分钟前
全场景智能克隆工具:超越 JSON.parse(JSON.stringify())
javascript
编程小Y23 分钟前
Vue 3 + Vite
前端·javascript·vue.js
GDAL32 分钟前
前端保存用户登录信息 深入全面讲解
前端·状态模式
大菜菜39 分钟前
Molecule Framework -EditorService API 详细文档
前端
Anita_Sun40 分钟前
😋 核心原理篇:线程池的 5 大核心组件
前端·node.js
灼华_44 分钟前
Web前端移动端开发常见问题及解决方案(完整版)
前端