共计 2610 个字符，预计需要花费 7 分钟才能阅读完成。
本文完整版：《最好用的 6 款 Vue 实时音讯提醒告诉 (Message/Notification) 组件举荐与测评》
Vue 音讯提醒告诉组件（Message / Notification）是咱们日常开发中常常应用的组件，它可用作与用户交互的反馈提醒，信息提交胜利、谬误、操作正告等场景应用。原生 JavaScript 提供了 alert、prompt、confirm 等办法，这三个办法的不反对定制化，应用场景重大受限，特地是 alert 在浏览器外弹窗，体验十分蹩脚。因而要想给用户提供良好的应用体验，咱们须要封装一个定制化较好的 Vue 音讯提醒组件，这种组件看似简略，但也存在十分多深坑要小心，例如遮罩层、隐没工夫、点击事件的冒泡解决等。
我本人在开发和钻研 Message / Notification 性能组件时，发现其实 Github 上有十分多开源的制作精良，应用场景定位清晰的第三方音讯提醒组件库可用，社区成熟，代码简洁，间接援用即可，齐全没必要本人写，本文给大家举荐 6 款我用过的开源音讯提醒库，各有劣势，可按需自取。
如果你正在搭建后盾管理工具，又不想解决前端问题，举荐应用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API，无需懂前端，仅需拖拽即可疾速搭建属于你本人的后盾管理工具，一周工作量缩减至一天，详见本文文末。
接下来我来介绍一下我用过且感觉不错的 6 款常见的 Vue Message / Notification 组件，大家可依据本人实现需求自取。
- vue-notification – 专一实时音讯提醒 各类款式随便批改 你想要的它都有
- SweetAlert2 – 反对 Vue 3 实时音讯提醒、全功能、性能包罗万象
- vue-toasted – 极简风，代码简洁，自定义轻便，轻量级音讯提醒组件
- vue-toastification – 带有按钮和 loading 进度条的音讯弹窗组件，给用户更多交互
- vue-notifications – 超轻量级，适宜只需提醒组件根底性能的开发者
- vue-toast-notification – 超轻量级，多种提醒类型，可定义地位、持续时间，列队等属性，反对 Vue 3
Vue-notification – 专一实时音讯提醒 各类款式随便批改 你想要的它都有
vue-notification 是简洁高效的音讯提醒组件库，惯例的胜利、谬误、正告款式随便筛选，它应用 Velocity 动效库作为它的动画反对，代码简洁，能够依据需要调整动画。更不用说惯例的色彩、字体、字号、弹出地位等细节，更是随便批改。
SweetAlert2 – 反对 Vue 3 实时音讯提醒、全功能、性能包罗万象
SweetAlert2 不仅是实时音讯提醒组件，也内置了弹窗组件性能。Github 高达 15k star 很阐明他的使用者之众。JS 写成的提醒弹窗组件，没有任何依赖，最近刚刚降级现已反对 Vue 3。SweetAlert2 走的是全功能路线，按钮、文本、图标、各种触发器、各种警报配置，包罗万象。当然对应这全功能的代价就是它不轻量，所以你要思考好，它大而全的性能是否是你所需。
扩大浏览《如何在 vue 中退出图表 – vue echarts 应用教程》
Vue-toasted – 极简风，代码简洁，自定义轻便，轻量级音讯提醒组件
vue-toasted 音讯提醒组件库可配置自定义操作，提示框持续时间，文本款式，图表款式等，提示框有拖拽和点击的性能，可与用户有更多的交互。Vue Toasted 十分玲珑易用，如果你的需要不是太简单，选它会十分适合。
除了这三种默认款式外，你能够自定义它的边框、色彩、字体，最根本的自定义都反对。
Vue-toastification – 带有按钮和 loading 进度条的音讯弹窗组件，给用户更多交互
vue-toastification 并不是一个简单的音讯提醒组件，他的劣势是蕴含隐没进度条和音讯提醒按键，进度条让用户理解音讯提醒的隐没工夫，加进度条的意义是 vue-toastification 蕴含可自定义的按钮，让用户在可预感的工夫内与按钮交互。按钮可登程新事件，减少了一次与用户互动的机会，在这里放一个倒计时反而显得突兀，这个进度条的特点是其余音讯提醒组件不常有的。
扩大浏览：《多款顶级开源 vue 表单设计器测评举荐》
Vue-notifications – 超轻量级，适宜只需提醒组件根底性能的开发者
vue-notifications 并非简略的音讯提醒组件库，而是你的 UI admin 框架与音讯提醒库之间的桥梁。你能够用它来轻松替换掉正在应用的 UI 提醒，而不须要重写代码。
Vue-toast-notification – 超轻量级，多种提醒类型，可定义地位、持续时间，列队等属性，反对 Vue 3
vue-toast-notification 是根底音讯提醒组件库，自带胜利、谬误、正告等多种类型提示框，可自定义地位、持续时间、音讯队列等配置信息。vue-toast-notification 不提供花哨的进度条等性能，专一在音讯提醒，用完即走的路数，只想用户展现提醒，而后隐没。多种可自定义的属性，还超级轻，是根底性能款爱好者的好抉择。
扩大浏览《Element Plus for Vue 3 入门教程》
Vue 音讯提醒组件总结
本文举荐了我本人应用多年的 6 款最好用的 Vue 音讯提醒告诉组件(Message/Notification)，这其中肯定有一款适宜你。这些第三方组件曾经帮咱们节俭大量开发工夫，如果还想更进一步，举荐应用卡拉云，卡拉云内置多种罕用组件，无需懂任何前端，仅需拖拽即可疾速生成。
卡拉云可帮你疾速搭建企业外部工具，下图为应用卡拉云搭建的外部广告投放监测零碎，无需懂前端，仅需拖拽组件，10 分钟搞定。你也能够疾速搭建一套属于你的后盾管理工具，理解更多。
卡拉云是新一代低代码开发平台，与前端框架 Vue、React 等相比，卡拉云的劣势在于不必首先搭建开发环境，间接注册即可开始应用。开发者齐全不必解决任何前端问题，只需简略拖拽，即可疾速生成所需组件，可一键接入常见数据库及 API，依据疏导简略几步买通前后端，数周的开发工夫，缩短至 1 小时。立刻收费试用卡拉云。
扩大浏览：
- Vue form 表单异步验证终极教程
- 最好用的 6 款 MongoDB GUI 管理工具横向测评
- 5 款最棒的 Vue UI 挪动端组件库 – 特地针对国内应用场景举荐
- 顶级好用的 5 款 Vue table 表格组件测评与举荐
- 12 款最棒 Vue 开源 UI 库测评 – 特地针对国内应用场景举荐