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

本文完。

相关推荐
冴羽7 分钟前
3 招让你的 Shadcn 出海应用性能提升 40 倍
前端·javascript·next.js
中议视控12 分钟前
网络中控系统通过推流软件实现可视化:RTSP,H265,WEB等推流
前端·网络
Hsuna16 分钟前
Tailwind CSS 比起传统CSS框架无法实现的一些功能
前端·react.js
SilentSamsara18 分钟前
装饰器基础:从闭包到装饰器的自然演变
开发语言·前端·vscode·python·青少年编程·pycharm
咸鱼翻身更入味18 分钟前
Agent流式输送
前端
摇滚侠1 小时前
11 空间转换 前端 Web 开发 HTML5 + CSS3 + 移动 web 视频教程,前端web入门首选黑马程序员
前端·css·html·css3·html5
小李子呢02112 小时前
前端八股网络浏览器---输入 URL 到页面呈现
前端·网络
Hello--_--World2 小时前
Vue:虚拟Dom
前端·javascript·vue.js