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

本文完。

相关推荐
幸福小宝13 小时前
uniapp 抽屉实现左滑
前端
戳气球的爱玛镇皇后13 小时前
BroadcastChannel 使用总结
前端
戳气球的爱玛镇皇后13 小时前
wps加载项不同窗口间通信
前端
心在飞扬14 小时前
LangGraph 基础知识
前端·后端
Lee川14 小时前
探索JavaScript的秘密令牌:独一无二的`Symbol`数据类型
javascript·面试
Lee川14 小时前
深入浅出JavaScript事件机制:从捕获冒泡到事件委托
前端·javascript
光影少年14 小时前
async/await和Promise的区别?
前端·javascript·掘金·金石计划
恋猫de小郭14 小时前
Flutter 发布官方 Skills ,Flutter 在 AI 领域再添一助力
android·前端·flutter
心在飞扬14 小时前
工具调用出错捕获提升程序健壮性
前端·后端
HelloReader14 小时前
Tauri 命令作用域(Command Scopes)精细化控制你的应用权限
前端