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

本文完。

相关推荐
兆子龙6 分钟前
V8 与 JavaScript 执行:从字节码、Ignition 到 TurboFan JIT 的完整管线
前端
CHU7290358 分钟前
家政同城服务APP前端功能玩法解析
前端·小程序
兆子龙11 分钟前
React Fiber 调度器源码解析:从 workLoop 到 commit 的完整渲染链路
前端·javascript
LQE16 分钟前
Vue 2 vs Vue 3:全面对比指南
前端
叫回忆17 分钟前
elpis的动态组件拓展
javascript
用户3501448179219 分钟前
数据对比中的”平等性原则“
前端
yuki_uix20 分钟前
从扁平到层级:树形数据转换的工程化实践与设计哲学
前端·javascript
米丘20 分钟前
vue-router 5.x 关于 RouterLink 实现原理
前端·javascript·vue.js
前端嘣擦擦22 分钟前
mac 安装 nvm + node + npm(国内镜像 + 官方安装步骤)
前端·macos·npm