view-design、element-plus、Ant Design Vue 组件库对比

大甜甜

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

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

结论

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

阅读 1.7k
11 声望
1 粉丝
0 条评论
你知道吗?

11 声望
1 粉丝
宣传栏