最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评

2023-11-11

最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评

本文完整版:《最好用的 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

vue-notification 是简洁高效的消息提示组件库,常规的成功、错误、警告样式随意挑选,它使用 Velocity 动效库作为它的动画支持,代码简洁,可以根据需求调整动画。更不用说常规的颜色、字体、字号、弹出位置等细节,更是随意修改。

SweetAlert2 - 支持 Vue 3 实时消息提示、全功能、功能应有尽有

sweetalert2-custom-positioned-dialog-message-with-auto-close-timer

SweetAlert2 不仅是实时消息提示组件,也内置了弹窗组件功能。Github 高达 15k star 很说明他的使用者之众。JS 写成的提示弹窗组件,没有任何依赖,最近刚刚升级现已支持 Vue 3。SweetAlert2 走的是全功能路线,按钮、文本、图标、各种触发器、各种警报配置,应有尽有。当然对应这全功能的代价就是它不轻量,所以你要考虑好,它大而全的功能是否是你所需。

扩展阅读《如何在 vue 中加入图表 - vue echarts 使用教程

Vue-toasted - 极简风,代码简洁,自定义轻便,轻量级消息提示组件

vue-toasted

vue-toasted 消息提示组件库可配置自定义操作,提示框持续时间,文本样式,图表样式等,提示框有拖拽和点击的功能,可与用户有更多的交互。Vue Toasted 非常小巧易用,如果你的需求不是太复杂,选它会非常合适。

除了这三种默认样式外,你可以自定义它的边框、颜色、字体,最基本的自定义都支持。

Vue-toastification - 带有按钮和 loading 进度条的消息弹窗组件,给用户更多交互

vue-toastification

vue-toastification 并不是一个复杂的消息提示组件,他的优势是包含消失进度条和消息提示按键,进度条让用户了解消息提示的消失时间,加进度条的意义是 vue-toastification 包含可自定义的按钮,让用户在可预见的时间内与按钮交互。按钮可出发新事件,增加了一次与用户互动的机会,在这里放一个倒计时反而显得突兀,这个进度条的特点是其他消息提示组件不常有的。

扩展阅读:《多款顶级开源 vue 表单设计器测评推荐

Vue-notifications - 超轻量级,适合只需提示组件基础功能的开发者

vue-notifications

vue-notifications 并非简单的消息提示组件库,而是你的 UI admin 框架与消息提示库之间的桥梁。你可以用它来轻松替换掉正在使用的 UI 提示,而不需要重写代码。

Vue-toast-notification - 超轻量级,多种提示类型,可定义位置、持续时间,列队等属性,支持 Vue 3

vue-toast-notification

vue-toast-notification 是基础消息提示组件库,自带成功、错误、警告等多种类型提示框,可自定义位置、持续时间、消息队列等配置信息。vue-toast-notification 不提供花哨的进度条等功能,专注在消息提示,用完即走的路数,只想用户展示提示,然后消失。多种可自定义的属性,还超级轻,是基础功能款爱好者的好选择。

扩展阅读《Element Plus for Vue 3 入门教程

Vue 消息提示组件总结

本文推荐了我自己使用多年的 6 款最好用的 Vue 消息提示通知组件(Message/Notification),这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间,如果还想更进一步,推荐使用卡拉云 ,卡拉云内置多种常用组件,无需懂任何前端,仅需拖拽即可快速生成。

卡拉云可帮你快速搭建企业内部工具,下图为使用卡拉云搭建的内部广告投放监测系统,无需懂前端,仅需拖拽组件,10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具,了解更多

卡拉云企业内部工具

卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云

扩展阅读:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评 的相关文章

随机推荐

  • linux外接光驱下载文件,Linux 从光驱拷贝文件以及加载新的硬盘

    加载光驱 1 将ISO文件放到光盘中 点击确定 2 连接光驱 如果是虚拟机 菜单VM gtsetting gtHardware gt选CD DVD gtConnection 3 将光驱加载到一个目录下 要先mount root lvs dr
  • SDN初创公司Big Switch获得Intel的650万美元融资,挑战思科的网络技术霸权

    原文地址 http www 36kr com p 201289 html SDN 软件定义网络 公司Big Switch Networks今天从 Intel Capital 手中拿到一笔 650 万美元的融资 这笔融资让 Big Switc
  • 换了个数据结构,一不小心把系统性能提升了10倍以上

    很多Java开发同学经常有一个疑惑 搞Java开发也需要懂算法吗 本文咱们就来谈谈这个问题 其实如果你开发一个非常复杂而且有挑战的大型系统 那么必然会在系统中使用算法 同理 如果你可以将算法进行合理的优化 那么也可以将系统性能提升几十倍 空
  • 生成新的数据列:使用R语言进行数据处理

    生成新的数据列 使用R语言进行数据处理 在数据分析和统计建模中 我们经常需要对现有数据进行处理和转换 以生成新的数据列来满足分析需求 R语言是一种功能强大的数据分析和统计建模工具 提供了各种函数和技术来处理数据 本文将介绍如何使用R语言生成
  • BSD协议和FreeBSD

    BSD协议 开放分类 BSD 协议 开源 BSD是 Berkely Software Distribution 的缩写 意思是 伯克利软件发行版 显然 BSD这个名称并不是我们现在所理解的操作系统 而且其原意也并非简单的操作系 统 而是一整
  • 通过smtplib和email发送验证码到电子邮箱(Python3.7.X)

    使用前需要在发送方的邮箱里开启POP3 SMTP服务 这里以QQ邮箱为例 设置 账户 开启服务 获得授权码 以下案例模拟发送一串纯文本的6位数字验证码 比较简单易懂 可在此基础上再完善 效果演示 代码展示 coding utf 8 impo
  • JSON.stringify 语法实例讲解

    语法 JSON stringify value replacer space value 是必选字段 就是你输入的对象 比如数组 类等 replacer 这个是可选的 它又分为2种方式 一种是数组 第二种是方法 情况一 replacer为数
  • 给打包文件的加上时间或者版本号

    const Version new Date getTime output path config build assetsRoot publicPath http www baidu com 修改 https iv admin 这部分为你
  • python运行代码不显示warning输出

    两种方法可以在python运行代码的时候不显示warning输出 方法1 import warnings warnings filterwarnings ignore 方法2 python W ignore run py
  • CGAL 快速构建三维凸包

    目录 一 三维凸包 二 代码实现 三 结果展示 四 结论 一 三维凸包 和二维凸包类似 给定一堆三维空间中的点 包含它们的最小凸多面体称为这些点的凸包 二 代码实现 include
  • java求两个数的最大公约数和最小公倍数

    解题思路 1 求最大公约数用辗转相除法 将较大的那个数对较小的那个数取余 如果a gt b 那就a b 取余得出的结果为下次运算的除数 上面较小的那个数将作为被除数 直到运算到较小为0时 返回较大的数 这个数就是最大公约数 2 最小公倍数就
  • 二十九、springBoot的监控和管理

    Spring Boot包含很多其他的特性 它们可以帮你监控和管理发布到生产环境的应用 你可以选择使用HTTP端点 JMX或远程shell SSH或Telnet 来管理和监控应用 审计 Auditing 健康 health 和数据采集 met
  • Linux——UDP协议及其编程流程

    UDP协议的特点 UDP 不提供可靠性的传输 它只是把应用程序传给 IP 层的数据报发送出去 但是并不能保证它们能到达目的地 由于 UDP 在传输数据报前不用在客户和服务器之间建立一个连接 且没有超时重发等机制 故而传输速度很快 无连接 不
  • 计算机网络-传输层(TCP协议特点和TCP报文段格式,TCP连接管理)

    文章目录 1 TCP协议特点 报文段格式 2 TCP连接管理 1 TCP协议特点 报文段格式 TCP是面向连接 虚连接 的传输层协议 每一条TCP连接只能有两个端点 每一条TCP连接只能是点对点的 TCP提供可靠交付的服务 无差错 不丢失
  • C++中的vector 利用swap去除多余容量

    以下内容主要参考博客 https baijiahao baidu com s id 1610227871099894962 wfr spider for pc 摘抄博客内容 如下 在使用C 中的 vector的时候 vector的申请的内存
  • CSS 样式的 initial(默认)和 inherit(继承)以及 unset

    经常会碰到 问一个 CSS 属性 例如 position 有多少取值 通常的回答是 static relative absolute 和 fixed 当然 还有一个极少人了解的 sticky 其实 除此之外 CSS 属性通常还可以设置下面几
  • 今天开始维护个人技术博客

    快下班了才写 从零开始 不管以后技术做到哪种程度 有个记录的习惯总是好的 一起加油 April
  • 1.cJSON使用的API简介笔记

    JSON JavaScript Object Notation JS 对象简谱 是一种轻量级的数据交换格式 它基于 ECMAScript 欧洲计算机协会制定的js规范 的一个子集 采用完全独立于编程语言的文本格式来存储和表示数据 简洁和清晰
  • 使用 cli(脚手架)构建一个vue.js程序

    1 通过cli工具初始化一个以Webpack为模板 项目名称为demo view的项目 2 通过上面步骤生成了项目结构 通过cd命令进入该项目的根目录 然后使用npm install命令安装项目需要的插件 3 使用npm run dev命令
  • 最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评

    本文完整版 最好用的 6 款 Vue 实时消息提示通知 Message Notification 组件推荐与测评 Vue 实时消息提示通知 Vue notification 专注实时消息提示 各类样式随意修改 你想要的它都有 SweetAl