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

本文完。

相关推荐
张清悠1 分钟前
CSS引入外部第三方字体
前端·javascript·css
追逐梦想之路_随笔3 分钟前
手撕Promise,实现then|catch|finally|all|allSettled|race|any|try|resolve|reject等方法
前端·javascript
张较瘦_4 分钟前
前端 | 吃透CSS视觉特效:圆角、渐变、动画与变换核心解析
前端·css
Tzarevich4 分钟前
Tailwind CSS:原子化 CSS 的现代开发实践
前端·javascript·css
借个火er5 分钟前
React 19 源码揭秘(二):useState 的实现原理
前端
微爱帮监所写信寄信14 分钟前
微爱帮监狱寄信写信小程序:深入理解JavaScript中的Symbol特性
开发语言·javascript·网络协议·小程序·监狱寄信·微爱帮
前端小臻21 分钟前
RustFs 前端开发
javascript·vue.js·rustfs
syt_101330 分钟前
js基础之-如何理解js中一切皆对象的说法
开发语言·javascript·原型模式
十五00134 分钟前
若依集成微软单点登录(SSO)
javascript·microsoft
YaeZed36 分钟前
Vue3-插槽slot
前端·vue.js