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

本文完。

相关推荐
深耕AI14 小时前
【wordpress系列教程】07 网站迁移与备份
运维·服务器·前端·数据库
月空MoonSky14 小时前
解决使用Notepad++出现异型字或者繁体字体问题
java·javascript·notepad++
joan_8515 小时前
input禁止自动填充
前端·elementui·vue
研☆香15 小时前
简单的复选框 全选 反选功能
javascript
林间风雨15 小时前
layui 2.9.16 版本,根据字段字数最大数,表格自适应字段宽度
前端·javascript·layui
hzb6666615 小时前
xd_day47文件上传-day55xss
javascript·学习·安全·web安全·php
木子啊15 小时前
HTML防窥技巧:让源码难以偷窥
前端·html·查看源码·禁止查看源码
梦65015 小时前
前端路由守卫:掌控页面跳转的 “守门人”
前端
jiayong2315 小时前
前端性能优化系列(二):请求优化策略
前端·性能优化