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

本文完。

相关推荐
gwcgwcjava几秒前
[技术积累]成熟的前端和后端开发框架
前端
bbsh20992 分钟前
SiteAzure:SetCookie 未设置Secure
前端·网络·安全·siteazure
Mintopia18 分钟前
计算机图形学环境贴图(Environment Mapping)教学指南
前端·javascript·计算机图形学
码农之王20 分钟前
(二)TypeScript前置编译配置
前端·后端·typescript
spmcor22 分钟前
css 之 Flexbox 的一生
前端·css
shenyan~23 分钟前
关于 WASM: WASM + JS 混合逆向流程
开发语言·javascript·wasm
Mintopia25 分钟前
Three.js 高级纹理(Advanced Textures):超越基础,打造沉浸式 3D 世界
前端·javascript·three.js
玄玄子26 分钟前
JS Promise
前端·javascript·程序员
Raink老师31 分钟前
7. TypeScript接口
javascript·typescript
Thanks_ks34 分钟前
探索现代 Web 开发:从 HTML5 到 Vue.js 的全栈之旅
javascript·vue.js·css3·html5·前端开发·web 开发·全栈实战