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

本文完。

相关推荐
kyriewen1 分钟前
JavaScript 继承的七种姿势:从“原型链”到“class”的进化史
前端·javascript·ecmascript 6
穷鱼子酱4 分钟前
ElSelect二次封装组件-实现分页(下拉加载、缓存)、回显
前端
科科睡不着5 分钟前
拆解iOS实况照片📷 - 附React web实现
前端
前端老兵AI5 分钟前
Electron 桌面应用开发入门:前端工程师的跨平台利器
前端·electron
胖子不胖7 分钟前
浅析cubic-bezier
前端
reasonsummer11 分钟前
【办公类-133-02】20260319_学区化展示PPT_02_python(图片合并文件夹、提取同名图片归类文件夹、图片编号、图片GIF)
前端·数据库·powerpoint
胡耀超27 分钟前
Web Crawling 网络爬虫全景:技术体系、反爬对抗与全链路成本分析
前端·爬虫·python·网络爬虫·数据采集·逆向工程·反爬虫
阿明的小蝴蝶31 分钟前
记一次Gradle环境的编译问题与解决
android·前端·gradle
Ruihong32 分钟前
【VuReact】轻松实现 Vue 到 React 路由适配
前端·react.js
山_雨33 分钟前
startViewTransition
前端