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

本文完。

相关推荐
向量引擎9 小时前
从零起步,如何打造专属向量引擎 API 中转工作流?
java·服务器·前端
丷丩9 小时前
MapLibre GL JS第27课:添加COG栅格源
javascript·map·mapbox·maplibre gl js
IT_陈寒9 小时前
Vue这个动态响应坑把我整不会了
前端·人工智能·后端
bestlanzi10 小时前
使用nvm管理node环境
前端·vue.js·npm
SomeOtherTime10 小时前
Geojson相关(AI回答)
java·前端·python
不好听61310 小时前
JavaScript 到底是怎么运行的?从编译阶段到执行上下文全面解析
javascript
丷丩11 小时前
MapLibre GL JS第29课:添加Canvas源
javascript·gis·map·mapbox·maplibre gl js
就叫_这个吧11 小时前
HTML常用标签及举例使用
前端·html
utf8mb4安全女神11 小时前
【rsyslog服务】把所有服务的“临界点”以上的错误都保存在/var/log/alert.log⽇志中
java·前端·javascript
YANQ66211 小时前
7.bundlesdf本地安装
前端·webpack·node.js