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 分钟前
jQuery性能优化终极指南
javascript·jquery
小小编程路2 分钟前
增强版 JavaScript 读取 Excel
开发语言·javascript·excel
ID_180079054736 分钟前
淘宝店铺所有商品 API 接口:核心能力与数据返回参考
java·服务器·前端
Hello--_--World12 分钟前
vite:什么是热更新?vite 和 webpack 有什么区别?vite常见配置和优化手段?
前端·webpack·node.js
渡我白衣12 分钟前
定时器与时间轮思想
linux·开发语言·前端·c++·人工智能·深度学习·神经网络
鹏程十八少15 分钟前
13. Android 面了50位Kotlin候选人,这36个语法坑90%的人答不全
前端·后端·面试
Highcharts.js16 分钟前
Highcharts React v5版本迁移的核心注意事项和步骤清单
开发语言·javascript·react.js·前端框架·highcharts
Hello--_--World18 分钟前
Vite:什么是bundleless?哪些要打包,哪些不要打包?依赖预构建是什么?依赖预构建如何减少网络请求的?esbuild 又是什么?
前端·javascript·webpack·vite
Rooting++18 分钟前
vue2+webpack打包优化的相关问题
前端·webpack·node.js
alxraves19 分钟前
超声图像前端信号处理的关键技术
前端·fpga开发·信号处理