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

本文完。

相关推荐
麒qiqi3 分钟前
【Linux 系统编程】文件 IO 与 Makefile 核心实战:从系统调用到工程编译
java·前端·spring
IT_陈寒9 分钟前
Vue3 性能优化实战:从10秒到1秒的5个关键技巧,让你的应用飞起来!
前端·人工智能·后端
gambool14 分钟前
新版chrome Edge浏览器不再支持手动添加cookie
前端·chrome·edge
一只爱吃糖的小羊17 分钟前
React 避坑指南:“闭包陷阱“
前端·javascript·react.js
web前端进阶者20 分钟前
electron-vite报错Unexpected end of JSON input
javascript·electron·json
weixin_4462608522 分钟前
八、微调后模型使用及效果验证-1
前端·人工智能·chrome·微调模型
by__csdn22 分钟前
大前端:定义、演进与实践全景解析
前端·javascript·vue.js·react.js·typescript·ecmascript·动画
带刺的坐椅29 分钟前
Java 低代码平台的“动态引擎”:Liquor
java·javascript·低代码·groovy·liquor
JS_GGbond30 分钟前
前端工具链:从“厨房设备”到“开箱即用”的轻松之旅
前端
7***374530 分钟前
前端体验的隐性力量:微交互、认知负担与情绪设计的技术实践思维
前端·交互