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

本文完。

相关推荐
小桥风满袖1 天前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 天前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 天前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学1 天前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼1 天前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 天前
全屏滚动网站PC端自适应方案
前端
RoyLin1 天前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 天前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
CryptoRzz1 天前
印度尼西亚股票数据API对接实现
javascript·后端
brzhang1 天前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构