ant vue 树形菜单横向显示_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue

今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 。好了,话不多说,直接开始:

组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我们要考虑的重点。

所以,本次对比,主要是从组件的多少,以及核心组件的对比来评判。

一、组件库

1、Element-UI

官方网站:https://element.eleme.cn/#/zh-CN;

2、iView UI

官方网站:https://www.iviewui.com/;

3、Ant Design of Vue

官方网站:https://vue.ant.design/docs/vue/introduce-cn/;

4、HeyUI

官方网站:https://www.heyui.top/;

二、组件对比

1、基础组件

四个组件库,大概有47个都具备的组件。

  • Grid 栅格
  • Layout 布局
  • Icon 图标
  • Button 按钮
  • Input 输入框
  • Radio 单选
  • Checkbox 多选
  • Select 下拉选择
  • AutoComplete 模糊匹配
  • NumberInput 数字输入
  • Switch 开关
  • Slider 滑块
  • Rate 评分
  • SwitchList 选项切换
  • Form 表单
  • Search 搜索框
  • Uploader 上传
  • Tree 树
  • Transfer 穿梭框
  • DatePicker 日期选择
  • TimePicker 时间选择
  • DatetimePicker 日期时间选择
  • DateRangePicker 日期范围选择
  • Cascader 级联选择
  • Breadcrumb 面包屑
  • Menu 菜单
  • Pagination 分页
  • Tabs 标签页
  • Steps 步骤条
  • DropdownMenu 下拉菜单
  • BackTop 返回顶部
  • Panel 面板
  • Tag 标签
  • Table 表格
  • Avatar 头像信息
  • Badge 微标数
  • Carousel 走马灯
  • Collapse 折叠面板
  • Progress 进度条
  • Loading 加载中
  • LoadingBar 加载进度条
  • Timeline 时间轴
  • Message 提示
  • Notice 通知
  • Modal 弹出框
  • Tooltip 气泡提示
  • Poptip 确定提示

PS:每个组件库不一定是相同的明名,但是大致是一样的组件。

2、Table组件对比

b687474b3e7891666cee999fdb394adc.png

PS:统计中关于“自定义索引”,iview 与 Ant Design Vue我并未看到相关文档,不一定正确。

相对来说,Element和Ant Design Vue在Table上的功能稍微比较多,如果,开发项目中的Table应用需求比较多,建议使用这两种。

3、对比总结

在目前的时间节点来看,每一种组件库都已经达到了一个功能完满的状态,开发中在技术选型的时候,可以根据自己的需求进行选择。每一种组件库在组件设计选择上,不尽相同,但是最终的组件总数上,都差不多。

三、组件推荐

每一种组件库,都拥有比较独特两眼的组件,大家可以根据自己需求选择,或者根据实际情况自己自定义相关组件也更方便些。

1、iView - Split 面板分割

对于展示的内容做分割,并且可以通过拖动的方式修改分割。

组件链接:https://www.iviewui.com/components/split;

aec12f3ed4eb9a279d7cada6184a7aab.png

2、HeyUI - DateFullRangePicker 超级日期范围控件

超级日期范围控件算是一个比较实用的功能,基本满足日期范围选择的所有需求。

组件链接:https://www.heyui.top/component/data/plugin/datefullrange;

2a94fb07737d1ebd8808e1e19dbc6456.png

3、Element - Calendar 日历

基础日历的展示

组件链接:https://element.eleme.io/#/zh-CN/component/calendar;

aa650fea730bf4ff5dbb1d196ffc661b.png

4、HeyUI - TreePicker 树选择器

通过Tree模式的数据,选择数据。

组件链接:https://www.heyui.top/component/plugin/treepicker;

e1b3a86dcab62996f6a61d09070397e0.png

5、Ant Design Vue - TreeSelect 树选择器

通过Tree模式的数据,选择数据(说实话,跟HeyUI的有点差距)。

组件链接:https://vue.ant.design/components/tree-select/;

4fb209dcaa4f931c5e2c5c7b53a4d55a.png

6、HeyUI - CategoryPicker 联动选择器

选择联动关联的信息(这个组件看到的有点晚,唉,下次一定要用)。

组件链接:https://www.heyui.top/component/other/categorypicker;

eed8e2849c5d79a1c23dc5b19bc5c5da.png

7、Element - Image 图片

继承图片展示的所有需求(个人感觉有些鸡肋)。

组件链接:https://element.eleme.io/#/zh-CN/component/image

7a4adf33a66a2ead12fd582f54157e46.png

8、HeyUI - ImagePreview 图片预览

图片预览功能以及图片列表展示(这个有点意思哈)。

组件链接:https://www.heyui.top/component/view/imagepreview;

9、HeyUI - TextEllipsis 超出文本省略

超出多行文本省略功能。(场景比较少,需要用到时手动即可搞定)

组件链接:https://www.heyui.top/component/other/textellipsis;

e10dc4b82048e48e0dc06395c517c85d.png

df1240d64d2768b6771bf761b81c0d61.png

0abf1dff39109beeaadb9a9aba247fe4.png

10、HeyUI - Clipboard 复制剪切板

复制剪切板集成(这个目前到还没用到)。

组件链接:https://www.heyui.top/component/other/clipboard;

四、总结

因为该篇文章引于HeyUI作者,所以最初看到原文的时候感觉有那么一点点强推的意思哈,但是对比之后发现,HeyUI确实有它的独到之处,

不可否认,Vue项目开发中用到的UI组件库最多的还是Element-UI以及Ant Design,特别还通用于React,当然了,也可能是我孤陋寡闻了,大家还是根据自己实际需要选择吧。

2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue​my.oschina.net
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页