顶级好用的 8 款 Vue 弹窗提示组件测评与推荐

A kitten
战场小包
前端实习生
最近更新 2022年05月16日

顶级好用的 8 款 Vue 弹窗提示dialog组件测评与推荐

Vue 弹窗是我们日常开发中经常使用的组件,它可以提供活动引导、提示通知、获取信息等,能便利与用户间的交互。原生 JavaScript 提供了 alert、prompt、confirm 等方法,这三个方法的不支持定制化,使用场景严重受限。因此我们如果想让用户具有良好的体验,我们需要封装一个定制化较好的 Vue 弹窗提示(popup / dialog)组件,弹窗组件封装起来虽说不难,但也存在很多考虑点,例如遮罩层、弹窗、点击事件的冒泡处理等。

我们在开发中,其实很忌讳重复造轮子的行为,一方面浪费了我们开发的精力;另一方面社区中成熟的组件库封装的功能、UI 会相对合理,用起来体验感更好。 vue 弹窗组件也不例外,神通广大的 vue 开发者开发了很多 popup / dialog 组件,本文记录了日常开发中我使用过的 8vue popup / dialog 组件库,它们各有各的特点,各有各的优势,在这里整理推荐给大家。

如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。

接下来介绍 8 款常用的 vue popup / dialog 组件,希望能帮助到大家:

  • sweet modal vue - 多种弹窗类型,UI 漂亮
  • vue sweetalert2 - 功能齐全,响应式,可定制,简单动效
  • vodal - 轻便简洁,多种动效
  • vue js modal - 可拖拽、缩放、自适应的简洁风
  • vue final modal - 支持拖拽、缩放,风格简约,定制化
  • vue2 simplert plugin - 基础弹窗功能,轻巧简洁,文档详细
  • vuejs dialog - 基础弹窗功能,支持软校验和硬校验
  • vue-modal - 定制化,简单动效

sweet modal vue - 多种弹窗类型,UI 漂亮

sweet-modal-vue

首选推荐 sweet-modal-vuesweet-modal-vue 功能最齐全,UI 简洁漂亮,配置简单,适应大多数弹窗应用场景。

sweet-modal-vue 功能:

  • 基本弹窗支持图标、图像、页脚等
  • HTML 自定义弹窗
  • 支持长滚动弹窗
  • 多弹窗堆叠
  • 弹窗中支持 tab

拓展阅读:《最好用的 5 个 Vue select 单选多选下拉组件

vue sweetalert2 - 功能齐全,响应式,可定制,简单动效

sweetalert2

sweetalert2 的功能也非常全面,与 sweet-modal-vue 相比,sweetalert2 弹窗中都带有简单动效,弹窗的活跃感非常好,给用户一种比较开心、自由的体验。

sweetalert2 的定制性非常好,弹窗的类型选择性非常多,支持标题、图标、页脚、HTML 标签、图像,还可以定义弹窗关闭时间,使用起来非常便捷。

sweetalert2 刚开始使用起来有可能会有几分复杂,其开发为配置化开发,需要按照文档编写 JavaScript 代码实现。

拓展阅读:《最好用的 7 款 Vue admin 后台管理框架测评

vodal - 轻便简洁,多种动效

vodal

vodal UI 设计风格简约,整体轻盈,设计感十足。弹窗方面只提供基础的功能,但 vodal 优势在于支持多种丝滑的动态效果,总体使用下来非常舒适。

拓展阅读:《最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐

vue js modal - 可拖拽、缩放、自适应的简洁风

vue-js-modal

vue-js-modal 也是一个不错的选择,UI 设计比较简洁淡雅,整体轻盈,并且它除了提供了基本弹窗功能,还附加了可拖拽、缩放、自适应功能,同时还提供对话框 dialog 组件,整体使用体验很棒。

拓展阅读:《vue.draggable 入门指南 - 手把手教你开发任务看板

vue final modal - 支持拖拽、缩放,风格简约,定制化

vue-final-modal

vue-final-modal UI 设计风格以白色系为主,非常舒适,组件库没有提供多种类型弹窗,但提供了大量的可配置属性,定制化程度非常高。该组件库也支持滚动、拖动、缩放、堆叠等效果。

拓展阅读:《最好用的 6 款 Vue 拖拽组件库推荐

vue2 simplert plugin - 基础弹窗功能,轻巧简洁,文档详细

vue2-simplert-plugin

vue2-simplert-plugin 提供弹窗的基本功能,包括图标、HTML标签、文本等,轻巧简洁,组件属性较少,而且文档比较详细,使用起来比较简单。

拓展阅读:《ECharts X 轴标签过长导致文字重叠的 4 种解决方案

vuejs dialog - 基础弹窗功能,支持软校验和硬校验

vuejs-dialog

vuejs-dialog 使用起来非常简单,UI 设计不算特别好看,但该组件库提供了软校验和硬校验功能,能为一些应用场景提供便利。

拓展阅读:《Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能

vue-modal - 定制化,简单动效

vue-modal

vue-modal 定制化较好,除基本弹窗功能外,vue-modal 支持多种 animation 动画配置、弹窗尺寸、长滚动、垂直居中、全屏或者侧边栏功能。

拓展阅读:《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐

vue 弹窗组件总结

本文介绍了 8 款常用的弹窗组件,各有各的优势,大家可以根据场景选择。如果你不想处理任何前端问题,还想更进一步,推荐使用卡拉云,卡拉云弹窗功能,无需懂任何前端,仅需拖拽即可快速生成。

kalacloud

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云

扩展阅读: