Vue Notification组件基于Vue 3的Toast通知实现

vue3 的通知组件用过不少,@dafcoe/vue-notification 算是比较顺手的一个。API 简单,样式清爽,自定义能力也挺强。Toast 弹出挺丝滑的,用在项目里不突兀。

VueNotificationList是它的核心组件,你可以全局注册,也可以按需在某个组件内使用,挺灵活的。比如你在main.js里这样写:

import VueNotificationList from '@dafcoe/vue-notification'
const app = createApp(App)
app.use(VueNotificationList).mount('#app')

触发通知的方式也简单,就像调用方法一样,写几个参数就能控制位置、类型、显示时间等,直观。

适合用在登录提示、表单验证、保存成功这类反馈场景。如果你在用 Vue3,又不想自己造轮子,真的可以试试。

另外,还有一些不错的相关资源可以搭配看看:Vue3 组件库Vue3 动态表单组件Vue 模板快速创建指南这些都挺实用的。

如果你项目还在用 Vue2,也不是不能用,只是建议升级 Vue3 体验更好。

zip
vue-notification-main.zip 预估大小:30个文件
folder
vue-notification-main 文件夹
folder
docs 文件夹
folder
css 文件夹
file
app.281bcdcd.css 9KB
file
index.html 751B
folder
js 文件夹
file
app.12ca24e2.js.map 57KB
file
chunk-vendors.14066df6.js.map 682KB
file
app.12ca24e2.js 17KB
file
chunk-vendors.14066df6.js 101KB
file
vue.config.js 39B
file
package.json 2KB
folder
src 文件夹
file
install.js 520B
file
App.vue 13KB
folder
assets 文件夹
folder
images 文件夹
file
sample.gif 8.74MB
file
shims-vue.d.ts 168B
file
main.ts 90B
folder
components 文件夹
file
vue-notification.enum.ts 496B
file
VueNotificationListItem.vue 6KB
file
vue-notification.constant.ts 3KB
file
vue-notification.store.ts 1024B
file
vue-notification.interface.ts 451B
file
VueNotificationList.vue 5KB
file
vue-notification.factory.ts 618B
file
.eslintrc.js 487B
file
tsconfig.json 673B
file
LICENSE.md 1KB
file
.gitignore 231B
file
.browserslistrc 30B
folder
public 文件夹
file
index.html 555B
file
README.md 3KB
file
yarn.lock 419KB
file
.editorconfig 121B
file
babel.config.js 75B
zip 文件大小:9.09MB