文章开始先介绍一下react-toastify，一个不单单是toast的组件，它集成了很多交互细节和增强功能，着实惊艳到了我，不禁想一个toast组件竟然能卷到如此地址~~
下面是它的在线案例：
fkhadra.github.io/react-toast…
处于好奇，参照它写了个vue3的版本（欢迎star，欢迎提bug）：
组件实现流程
其中绿色圆形区块表示组件
项目采用我之前做的自动npm发包模板搭建
集成了很多功能，比如
- vitest单元测试（包含testing-library）
- 原生npm mono repo
- 支持esm/cjs打包
- github action workflow，自动跑test, eslint,...; npm publish、github create relase;..
- 内置vitepress
- 内置playground
- ....
更多详见文章
在线案例截图
在线文档截图
我为每个usage都配备了CodeSandpack，它是一个在线code playground，支持vue/react/angular/...
真实案例如下（加载有些慢，稍等一会），同码上掘金一样，代码可实时编辑预览：
vitest ui截图
组件介绍
功能案例介绍（重要看点）
大而全的地址：vue3-toastify.netlify.app/usage/posit…
本文只挑几个展示一下：
- POSITION
- theme & icon
- toast.promise
- update toast
- Define a custom enter and exit animation
- Pause toast timer when the window loses focus
