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

本文完。

相关推荐
嘉琪0011 分钟前
Day6 完整学习包(async/await)——2026 0318
前端·javascript·学习
SameX5 分钟前
我做了个本地优先的 iOS 足迹 App,上架后才发现:最难的根本不是地图,而是让轨迹活下来
前端
踩着两条虫7 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十八):扩展与定制之集成第三方库
前端·vue.js·agent
css趣多多9 分钟前
# Vue 3 `<script setup>` 中变量声明的正确姿势:何时必须使用 `ref()`?
前端·javascript·vue.js
用户693717500138412 分钟前
跟你唠唠!A2A协议来了,谁能拿下下一代手机系统的主动权?
android·前端·人工智能
踩着两条虫12 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十七):扩展与定制之扩展 Provider 系统
前端·vue.js·agent
kyriewen1122 分钟前
Sass:让 CSS 从手工作坊迈入工业时代
前端·javascript·css·html·css3·sass·html5
冰暮流星23 分钟前
javascript之变量作用域
开发语言·前端·javascript
lxh011327 分钟前
嵌套数组生成器题解
开发语言·javascript·ecmascript