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

本文完。

相关推荐
xinzheng新政14 小时前
Javascript·深入学习基础知识
前端·javascript·学习
前端付豪15 小时前
实现记忆开关
前端·后端
前端开发呀15 小时前
约定式路由的极简主义实践:一个插件搞定 React/Vue × Vite/Rspack
前端
代码煮茶15 小时前
Vue3 插件开发实战 | 从 0 开发一个全局通知组件(Toast/Message)并发布到 npm
javascript·vue.js
程序员Ctrl喵15 小时前
Flutter 第三阶段:基础 Widget 全面指南
开发语言·javascript·flutter
我就是马云飞15 小时前
停更5年后,我为什么重新开始写技术内容了
android·前端·程序员
韭菜炒大葱15 小时前
事件捕获、事件冒泡、事件源对象、事件委托
javascript·面试
品克缤15 小时前
Vue3 + Router 页面切换时滚动条闪烁问题记录
前端·javascript·css·vue.js
walking95715 小时前
Linux-从0开始-20260408
linux·前端·面试
PILIPALAPENG15 小时前
第1周 Day 5:前端转型AI,回顾总结🎯
前端·人工智能·python