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

本文完。

相关推荐
LilyCoder10 分钟前
HTML5中华美食网站源码
前端·html·html5
拾光拾趣录15 分钟前
模块联邦(Module Federation)微前端方案
前端·webpack
江湖人称小鱼哥34 分钟前
react接口防抖处理
前端·javascript·react.js
GISer_Jing1 小时前
腾讯前端面试模拟详解
前端·javascript·面试
saadiya~1 小时前
前端实现 MD5 + AES 加密的安全登录请求
前端·安全
zeqinjie1 小时前
回顾 24年 Flutter 骨架屏没有释放 CurvedAnimation 导致内存泄漏的血案
前端·flutter·ios
萌萌哒草头将军1 小时前
🚀🚀🚀 Webpack 项目也可以引入大模型问答了!感谢 Rsdoctor 1.2 !
前端·javascript·webpack
小白的代码日记1 小时前
Springboot-vue 地图展现
前端·javascript·vue.js
teeeeeeemo1 小时前
js 实现 ajax 并发请求
开发语言·前端·javascript·笔记·ajax
OEC小胖胖2 小时前
【CSS 布局】告别繁琐计算:CSS 现代布局技巧(gap, aspect-ratio, minmax)
前端·css·web