原文链接:20 多个好用的 Vue 组件库
在本文中,将分享一些常见的 vue.js 组件。
Tables / Data Grids
Vue Tables-2
地址:https://github.com/matfish2/v…
Vue Tables 2 旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创立丑陋而实用的数据表格。数百个商业软件利用正在应用它。此外,Vue Tables 2 正在一直成长、改良,同时也在取得新的性能。
特点如下:
- 可选行及粘性头部
- 虚构分页
- 下载客户组件数据的 CSV
- 有数据层反对的多级分组
- Tailwind 主题
Handsontable
地址:https://github.com/handsontab…
Handsontable 是一款页面端的表格交互插件,能够通过它加载显示表格内容,可能反对合并项、统计、行列拖动等。
反对对加载后的表格页面的解决:增加 / 删除行 / 列,合并单元格等操作。
此外,它还实用于 React、Angular 和 Vue。Handsontable 是一个 JavaScript 组件,它将数据网格性能与电子表格的用户体验相结合。此外,它还提供数据绑定、数据验证、过滤、排序和 CRUD 操作。
特点如下:
- 多列排序
- 非间断抉择
- 过滤数据和验证数据
- 导出文件
- 有条件的格式化
- 合并单元格
- 暗藏行 / 列
- 上下文菜单和正文
Ag Grid Vue
地址:https://github.com/ag-grid/ag…
Ag-Grid 是一个基于 Vue.js 的数据表格组件。其中,“ag”示意“agnostic”。外部 ag-Grid 引擎是在 TypeScript 中实现的,零依赖关系。
ag-Grid 通过包装器组件反对 Vue,你能够在应用程序中,就像其余任何 Vue 组件一样应用 ag-Grid。它反对通过属性绑定传递配置,通过事件绑定来处理事件。你甚至能够应用 Vue 组件来自定义网格 UI 和单元格内容 / 行为。
Vue Easytable
地址:https://github.com/huangshuwe…
vue-easytable 是我遇到过的最弱小的 Vue 表格组件之一。
表格组件具备许多内置性能,比如说,单元格省略号、固定 / 灵便的列大小调整、自定义过滤等等。它有几个特点:
- 国际化
- 主题定制
- 内置主题
- 虚构滚动
- 列固定
- 表头固定
- 表头分组
Vue Good Table
地址:https://github.com/xaksis/vue…
Vue-Good-Table 是一个基于 Vue.js 的数据表组件,简略、洁净,具备排序、列过滤、分页等更多基本功能。它有几个个性:
- 表搜寻和排序
- 列过滤和分页
- 复选框表格
- 行分组
- 行款式
- 行多选
Notification
Vue Toastification
地址:https://github.com/Maronato/v…
它提供笨重、简略和丑陋的吐司提醒。它有内置的 Nuxt 反对。而且,它还反对新的 Composition API 和 Vue 3。咱们还能够应用 JSX 来开发自定义组件,提供更加灵便的性能。另外,通用注册容许它在任何应用程序内应用,甚至是 React。它有几点个性:
- 齐全用 Typescript 编写,反对所有类型
- 反对 RTL
- 定制所有
- 滑动敞开
- 应用 onClose、onClick 和 onMounted 钩子创立自定义体验
- 以编程形式删除和更新吐司
Vue Toasted
地址:https://github.com/shakee93/v…
Vue Toasted 是 Vue 最好的 toast (提醒) 插件之一。它被 Vue,Laravel,NuxtJS 等许多组织所信赖,它响应性强,兼容性好,使用方便,吸引人,有丰盛的性能、图标、动作等。
Vue Notifications
地址:https://github.com/se-panfilo…
Vue Notifications 是一个与库无关的告诉组件,非阻塞。
VueNotiments 将您的应用程序与告诉 UI 库连接起来。反对 miniToastr、VueToasted、VueEasyToast、toastr、iziToast、Noty、swal。
Vue Awesome Notifications
地址:https://f3oall.github.io/awes…
Awesome Notifications 是一个轻量级的,齐全可自定义的 JavaScrip Vue Awesome Notifications,它是 Awesome Notifications 库的 Vue.js 版本。
Loader
Vue Wait
地址:https://github.com/f/vue-wait
Vue Wait 这是一个用于 VUE、Vuex 和 Nuxt 利用的简单装载器和进度治理组件。
Vue Wait 帮忙治理页面上的多个加载状态,状态之间没有任何抵触。基于一个非常简单的想法:通过治理具备多个加载状态的数组 (或者 Vuex 存储),让内置加载程序组件侦听注册的加载程序,并立刻进入加载状态。
Vue Content Loader
地址:https://github.com/egoist/vue…
Vue Content Loader 是一个基于 Vue.js 的 SVG 占位符加载,可自定义的 SVG 组件,用于创立占位符加载,例如 Facebook 加载卡。Vue Content Loader 是 react-content-loader 的 Vue 实现。
Epic Spinners
地址:https://epic-spinners.epicmax…
EpicSpinners 是一组易于应用的纯 css 打造的网页 Loading 成果,并且同时整合了 Vue 组件能够不便的在 Vue 我的项目中进行应用,因为是纯 css 打造,你能够在任意网页我的项目中自行整合并应用!
Vue Radial Progress
地址:https://github.com/wyzant-dev…
Vue Radial Progress 这是一个径向进度条成果的加载器组件,应用 svg 和 javascript 绘制带有突变径向进度条成果的加载器,能够用作加载、进度提醒。
ICONS
Vue Feather Icons
地址:https://github.com/egoist/vue…
Feather 是一套面向设计师和开发者的开源图标库,是一个简略丑陋的开源图标库。每个图标都设计在一个 24×24 的网格上,强调简略,一致性和易读性。很多大厂出品的前端框架都内置了这款能够收费商用的图标。它的特点如下:
- 每一枚图标都是依照统一标准进行设计,具备完满像素对齐;
- 设计格调统一,完胜那些拼凑混搭的图标库;
- 笼罩多种开发场景的反对,对开发者十分敌对。
Vue Awesome
地址:https://github.com/Justineo/v…
Font Awesome 是一套风行的图标字体库,咱们在理论开发的过程中会常常遇到须要应用图标的场景,对于一些罕用的图标,不必设计师,咱们能够间接在 Font Awesome 中找到并且应用。个人感觉 Font Awesome 的图标还是很齐全的,绝大多数的图标它都蕴含了,而且反对各种框架。
Charts
Vue Apexcharts
地址:https://github.com/apexcharts…
Apexcharts 是一个古代的 JavaScript 图表库 / 可通过简略的 API 构建交互式图表和可视化。Vue Apexcharts 是 ApexCharts 的 Vue.js 组件。
Vue Echarts
地址:https://github.com/Justineo/v…
vue-echarts 是基于 echarts 封装实现的一个组件库,间接依照失常的组件援用形式,装置援用即可,具体的装置和援用读者能够间接浏览 vue-echarts 技术文档。
Vue Chartjs
地址:https://github.com/aperturele…
![在这里插入图片形容](https://img-blog.csdnimg.cn/i…
vue-chartjs 是一个 Vue 对于 Chart.js 的封装,让用户能够在 Vue 中轻松应用 Chart.js,很简略的创立可复用的图表组件,非常适合须要简略的图表并尽可能快地运行的人。vue-chartjs 形象了根本逻辑,同时也裸露了 Chart.js 对象,让用户取得最大的灵活性。
V-Charts
地址:https://github.com/ElemeFE/v-…
V-Charts 是基于 Vue2.0 和 Echarts 封装的图标组件,只须要对立提供一种对前后端都敌对的数据格式设置简略的配置项,就能够生成常见的图表。
工夫
Vue Timer Hook
地址:https://github.com/riderx/vue…
Vue3 计时器模块的灵感来自 react-timer-hook。此外,它是一个自定义的钩子,用来解决 vue 3 组件中的定时器、秒表和工夫逻辑 / 状态。
Vue Horizontal Timeline
地址:https://github.com/guastallai…
Vue Horizontal Timeline 是一个用 Vue.js 制作的简略的程度工夫线组件。