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

本文完。

相关推荐
3秒一个大7 分钟前
JavaScript 作用域:从执行机制到块级作用域的演进
javascript
OLong10 分钟前
忘掉"发请求",声明你要的数据:TanStack Query 带来的思维革命
前端
琦遇11 分钟前
Vue3使用vuedraggable实现拖拽排序
前端
银月流苏12 分钟前
Vue 深度选择器 `:deep` 使用说明
前端
程序媛ing12 分钟前
React + ECharts 动态折线图实现
前端·react.js
星空的资源小屋16 分钟前
VNote:程序员必备Markdown笔记神器
javascript·人工智能·笔记·django
广州华水科技19 分钟前
单北斗GNSS变形监测在地质灾害与基础设施安全中的应用与优势分析
前端
程序员鱼皮37 分钟前
又被 Cursor 烧了 1 万块,我麻了。。。
前端·后端·ai·程序员·大模型·编程
孟祥_成都1 小时前
nextjs 16 基础完全指南!(一) - 初步安装
前端·next.js
程序员爱钓鱼1 小时前
使用简单 JSON + 自定义 t 函数实现轻量多语言国际化(无需 next-intl)
前端·javascript·trae