乐趣区

关于前端:20多个好用的-Vue-组件库请查收

jiezi

作者：lindelof
译者：前端小智
起源:medium

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

在本文中，咱们将探讨一些最常见的 vue js 组件。你能够珍藏一波。

Table 类

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 的数据表组件，简略、洁净，具备排序、列过滤、分页等更多基本功能。它有几个个性：

  • 表搜寻和排序
  • 列过滤和分页
  • 复选框表格
  • 行分组
  • 行款式
  • 行多选

Vue Toastification

地址：https://github.com/Maronato/v…

它提供笨重、简略和丑陋的吐司提醒。它有内置的 Nuxt 反对。而且，它还反对新的 Composition API 和 Vue 3。咱们还能够 J 应用 SX 来开发自定义组件，提供更加灵便的性能。另外，通用注册容许它在任何应用程序内应用，甚至是 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 版本。

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 实现。

  1. 齐全可定制：你能够扭转色彩，速度和大小
  2. 创立本人的加载：应用在线工具轻松创立你的自定义加载
  3. 你当初就能够应用它：曾经有很多预设了
  4. 性能

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 的图标还是很齐全的，绝大多数的图标它都蕴含了，而且反对各种框架。

Vue Material Design Icons

地址：https://github.com/robcresswe…

一个作为单文件组件的 SVG Material Design 图标汇合。此外，这个库是一个 Vue 单文件组件的汇合，用于渲染 Material Design 图标。此外，它还包含一些 CSS，有助于使图标的缩放更容易一些。

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…

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 制作的简略的程度工夫线组件。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://medium.com/js-dojo/20…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版