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

本文完。

相关推荐
宁&沉沦3 分钟前
Chrome 扩展 Manifest 字段版本支持一览(全量)
前端·后端·编辑器
乖孩子16 分钟前
Service Worker + IndexedDB 实践
前端
浮生望25 分钟前
BFF架构实战:用Express+SSE为Vue3搭建安全的流式对话中间层
前端
Quz29 分钟前
QML 与 JavaScript 交互方式:内联函数、外部文件、信号槽与工作线程
javascript·qt
拾年2751 小时前
React 组件通信完全指南 —— 从 Todo App 搞懂父子组件那点事
react.js
先吃饱再说1 小时前
React 组件通信:从 Props 单向传递到自定义事件
前端·react.js·前端框架
swipe1 小时前
05|(前端转后全栈)不手写一堆 SQL,后端怎么操作数据库?MyBatis-Plus 入门
前端·后端·全栈
Allshadow1 小时前
Nest.js - 连接数据库
javascript·nestjs
冰暮流星1 小时前
javascript之date对象
开发语言·javascript·ecmascript
swipe1 小时前
04|(前端转后全栈)前端状态为什么不够用?从页面数据到 MySQL 持久化
前端·后端·全栈