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

本文完。

相关推荐
小小小小宇5 小时前
软键盘常见问题(二)
前端
小小小小宇5 小时前
软键盘常见问题
前端
小小小小宇5 小时前
富文本编辑器知识体系(三)
前端
小小小小宇5 小时前
富文本编辑器知识体系(二)
前端
品克缤5 小时前
Trading-Analysis:基于“规则+LLM”的行情分析终端(兼谈 Vibe Coding 实战感)
前端·后端·node.js·vue·express·ai编程·llama
隔壁小邓5 小时前
前端Vue项目打包部署实战教程
前端·javascript·vue.js
TON_G-T6 小时前
javascript中 Iframe 处理多端通信、鉴权
开发语言·前端·javascript
周淳APP6 小时前
【JS之闭包防抖节流,this指向,原型&原型链,数据类型,深浅拷贝】简单梳理啦!
开发语言·前端·javascript·ecmascript
kyriewen6 小时前
console.log 骗了我一整个通宵:原来它才是时间旅行者
前端·javascript·chrome
忆江南6 小时前
# iOS 动态库与静态库全面解析
前端