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

本文完。

相关推荐
qq_25183645718 小时前
基于java Web汽车销售管理系统设计与实现
java·前端·汽车
花椒技术18 小时前
低代码平台接入 Agent 后,我们踩到的组件、上下文和追问坑
前端·人工智能·agent
豹哥学前端19 小时前
事件循环(Event Loop)深度解析:让你彻底搞懂 JS 的执行顺序
前端·javascript·面试
竹林81819 小时前
用 wagmi v2 + Next.js 14 搞 NFT 交易市场前端:从合约调用失败到顺利上架,我踩了哪些坑
javascript·next.js
前端不开发19 小时前
用一个 Bookmarklet(书签脚本),给任意网页挂一个可拖拽悬浮窗
前端·javascript
接着奏乐接着舞20 小时前
【无标题】
开发语言·前端·javascript
Ian在掘金20 小时前
SSE 还是 WebSocket?从 AI 流式输出聊到实时通信选型
前端·人工智能
雨雨雨雨雨别下啦20 小时前
心理健康AI助手 - 项目总结
前端·javascript·vue.js·人工智能·信息可视化