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

33次阅读

共计 4192 个字符,预计需要花费 11 分钟才能阅读完成。

作者: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 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
 0