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

本文完。

相关推荐
cjy0001118 小时前
2026年9月零基础能听懂国内 FDE 讲师的课吗?
大数据·前端·人工智能·fde
南雨北斗8 小时前
wangeditor5 在vue3项目中的正确配置
前端
老三_Micheal8 小时前
一文搞懂 Axios 请求参数详解:headers、params 与 body 的区别和使用场景
javascript
Cache技术分享8 小时前
517. Java 方法句柄 - 方法句柄 vs 反射 API
前端·后端
小刘在重生~8 小时前
Web 前端基础|HTML+CSS+JavaScript+Bootstrap
前端·css·html
是立不是利8 小时前
第二篇:CSS 与用户体验——看不见的设计
前端·css·ux
研☆香8 小时前
js中 onload 事件的用法
开发语言·javascript·ecmascript
打呵欠的猫8 小时前
我把 20 个页面的权限控制从"硬编码"改成"配置驱动",AI 帮我生成了 80% 的迁移代码
前端·ai编程
志尊宝8 小时前
Vue3 零基础每日笔记(005):ref 响应式基础——为什么 script 里要 .value
前端·javascript·vue.js·笔记
海鸥两三8 小时前
Mac电脑使用 Tabby 部署前端项目到阿里云服务器完整教程
前端·macos·阿里云