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

本文完。

相关推荐
Web极客码40 分钟前
WordPress 6.8有哪些新特性
前端·javascript·html
UXbot6 小时前
UI设计工具推荐合集
前端·人工智能·ui
码路星河6 小时前
基于 Vue + VueUse 的 WebSocket 优雅封装:打造高可用的全局连接管理方案
javascript·vue.js·websocket
摘星编程6 小时前
React Native + OpenHarmony:Accelerometer计步器代码
javascript·react native·react.js
敲敲了个代码6 小时前
如何优化批量图片上传?队列机制+分片处理+断点续传三连击!(附源码)
前端·javascript·学习·职场和发展·node.js
@AfeiyuO6 小时前
Vue 引入全局样式scss
前端·vue·scss
光影少年6 小时前
flex布局和grid布局区别,实现两边固定布局中间自适应
前端·css3·web·ai编程
全栈测试笔记7 小时前
异步函数与异步生成器
linux·服务器·前端·数据库·python
EndingCoder7 小时前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json
木风小助理7 小时前
JavaStreamAPI的性能审视,优雅语法背后的隐形成本与优化实践
java·前端·数据库