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

本文完。

相关推荐
500佰几秒前
技术包办模式给我带来的反思
前端
g***72704 分钟前
spring-boot-starter和spring-boot-starter-web的关联
前端
用户41429296072396 分钟前
解决「买不到、买得贵、买得慢」:反向海淘独立站的核心功能设计与案例复盘
前端·后端·架构
N***p3657 分钟前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
五号厂房9 分钟前
网络请求库通用封装(GET/POST + 超时 + 传参)+fetch
前端
小雨青年11 分钟前
智能交互新范式:拒绝“黑盒”,带你用 MateChat 与 DSL 构建“高可靠”的 NL2UI 引擎
前端·ai·华为云
anyup14 分钟前
🔥牛逼!3分钟生成 5 套主题,还能一键切换暗黑模式!
前端·前端框架·uni-app
进击的明明15 分钟前
深入讨论前端开发中的跨域问题🤔
前端
大怪v16 分钟前
【创世界01】头脑热一把,我要带你纯前端手搓虚拟世界💪!
javascript·css·html
正在走向自律18 分钟前
企业微信消息推送全链路实战:Java后端与Vue前端集成指南
前端·vue.js·企业微信·企业微信消息推送·官方企业微信