view-designelement-plusAnt Design Vue 组件库对比

Posted 2021-09-04 大甜甜

使用vue3.0初始化项目化，在选择组件库上纠结用 element-plus 还是 Ant Design Vue，故做了如下对比（同时加进了 view-design vue2.0做对比）：

访问地址

1. view-design：http://v1.iviewui.com/docs/introduce
2. element-plus：https://element-plus.gitee.io/#/zh-CN/component/installation
3. Ant Design Vue：https://www.antdv.com/docs/vue/introduce-cn/

比对项

索引	对比项	view-design	element-plus	Ant Design Vue
1	vue2.0	Y	N	N
2	vue3.0	N	Y	Y
3	star/fork	23.8k/4.2k	10.6k/1.1k	14.7k/2.5k
4	IE11	Y	?	Y
5	组件总览	N	N	Y
6	Color 色彩 示例	Y	Y	暂未找到
7	Font 字体 示例	Y	Y	Y = Typography 字体
8	Typography 排版	N	N	Y 跟element-plus的 Typography 字体不是一个意思
9	Layout 布局	Y = Row/Col	Y	Y = Grid
10	Container 布局	Y = Layout	Y	Y = Layout
11	Border 边框 示例	N	Y	N
12	Button 按钮	Y	Y	Y
13	Icon 图标	Y 多	Y 少	Y 少
14	Button 按钮	Y	Y	Y
15	Link 文字链接	N	Y	N
16	Space 间距	N	Y	N
17	Scrollbar 滚动条	N	Y	N
18	Form 表单	Y	Y	Y
19	Form: Radio 单选框	Y	Y	Y
20	Form: Checkbox 多选框	Y	Y	Y
21	Form: Input 输入框	Y	Y 包含：AutoComplete	Y
22	Form: InputNumber 计数器	Y	Y	Y
23	Form: Select 选择器	Y	Y	Y
24	Form: Select-V2 虚拟列表选择器Beta	N	Y 测试阶段	N
25	Form: Cascader 级联选择器	Y	Y	Y
26	Form: Switch 开关	Y	Y	Y
27	Form: Slider 滑块	Y	Y	Y
28	Form: TimePicker 时间选择器	Y 支持：选择区间	Y 支持：选择区间	Y
29	Form: TimeSelect 时间选择	N	Y 提供几个固定的时间点供用户选择	N
30	Form: DatePicker 日期选择器	Y 支持：选时间	Y 选时间用：DateTimePicker	Y 支持：选时间
31	Form: DateTimePicker 日期时间选择器	N 用DatePicker	Y	N 用DatePicker
32	Form: Rate 评分	Y	Y	Y
33	Form: ColorPicker 颜色选择器	Y	Y	N
34	Form: Transfer 穿梭框	Y	Y	Y
35	Table 表格	Y 支持：拖拽调整列宽	Y 支持：拖拽调整列宽	Y
36	Tag 标签	Y	Y	Y
37	Progress 进度条	Y	Y	Y
38	Tree 树形控件	Y	Y 支持：筛选、拖拽	Y 支持：筛选、拖拽
39	Pagination 分页	Y	Y	Y
40	Badge 标记	Y	Y	Y
41	Avatar 头像	Y	Y	Y
42	Skeleton 骨架屏	N	Y	Y
43	Empty 空状态	N	Y	Y
44	Descriptions 描述列表	Y Pro 收费	Y 列表形式展示多个字段	Y
45	Result 结果	Y Pro 收费：不包含异常，异常用 Exception也收费	Y	Y
46	Alert 警告	Y	Y	Y
47	Loading 加载	Y = Spin	Y	Y = Spin
48	Message 消息提示	Y 支持：手动关闭	Y 支持：手动关闭	Y
49	MessageBox 弹框	N	Y 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。	N
50	Notification 通知	Y	Y	Y
51	Affix 固钉	Y	Y	Y
52	NavMenu 导航菜单	Y = Menu	Y	Y = Menu
52	Tabs 标签页	Y	Y	Y
54	Breadcrumb 面包屑	Y	Y	Y
55	PageHeader 页头	Y Pro 收费	Y 如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。	Y
56	Dropdown 下拉菜单	Y	Y	Y
57	Steps 步骤条	Y	Y	Y
58	Dialog 对话框	Y = Modal	Y	Y = Modal
59	Tooltip 文字提示	Y	Y	Y
60	Popover 弹出框	Y = Poptip 含确认	Y	Y 含确认
61	Popconfirm 气泡确认框	N	Y 跟Popover的区别是带 “确认”	N
62	Card 卡片	Y	Y	Y
63	Carousel 走马灯	Y	Y	Y
64	Collapse 折叠面板	Y	Y	Y
65	Timeline 时间线	Y	Y	Y 支持：左右交替展示
66	Divider 分割线	Y	Y	Y
67	Calendar 日历	Y Pro 收费	Y	Y
68	Image 图片	N	Y	Y
69	Backtop 回到顶部	Y	Y	Y
70	InfiniteScroll 无限滚动	Y = Scroll	Y	N
71	Drawer 抽屉	Y	Y	Y
72	AutoComplete 自动完成	Y	N Input中已包含	Y
73	Mentions 提及	N	N	Y
74	TreeSelect 树选择	Y Pro 收费	N Tree中包含	Y
75	Comment 评论	N	N	Y
76	List 列表	Y	N	Y
77	Statistic 统计数值	N	N	Y
78	Anchor 锚点	Y	N	Y
79	ConfigProvider 全局化配置	N	N	Y
80	Grid 宫格	Y 类似九宫格	N	N
81	Cell 单元格	Y 用于固定的菜单列表	N	N
82	GlobalFooter 全局页脚	Y	N	N
83	Ellipsis 文本自动省略号	Y Pro 收费	N	N
84	FooterToolbar 底部工具栏	Y Pro 收费	N	N
85	LoadingBar 加载进度条	Y Pro 收费	N	N
86	Login 登录	Y Pro 收费	N	N
87	City 城市选择器	Y Pro 收费	N	N
88	Exception 异常	Y Pro 收费：错误类信息	N	N
89	AvatarList 头像列表	Y Pro 收费	N	N
90	Trend 趋势标记	Y Pro 收费	N	N
91	Circle 进度环	Y Pro 收费	N = Progress	N = Progress
92	Auth 鉴权	Y Pro 收费	N	N
93	CountDown 倒计时	Y Pro 收费	N	N
94	CountUp 数字动画	Y Pro 收费	N	N
95	Numeral 数字格式化	Y Pro 收费	N = Progress	N = Progress
96	NumberInfo 数据文本	Y Pro 收费	N	N
97	WordCount 字数统计	Y Pro 收费	N	N
98	CountUp 数字动画	Y Pro 收费	N	N
98	Modal 对话框	Y	Y = Dialog	Y

以上对比结果不一定齐全，只是大体上做了比较，一些细节上没有特别细，若有发现细节上的差异会另行补充。

结论

从对比数据来说，更偏向使用 element-plus，像日历组件等是不收费的。