Element Plus 和 Arco Design Vue 两个库的简单对比

冬日暖阳一片云
1,257 阅读6分钟

本文主要是对 Element Plus 和 Arco Design Vue 两个组件库的简单对比，有个初步了解

CSS设计变量

Element Plus

css
复制代码
--el-text-color-primary: #303133;
--el-text-color-regular: #606266;
--el-text-color-secondary: #909399;
--el-text-color-placeholder: #a8abb2;
--el-text-color-disabled: #c0c4cc;

image.png

Arco Design Vue

css
复制代码
--color-text-1: #121314; // 标题、重点文本
--color-text-2: #5c5c5c; // 常规正文
--color-text-3: #909399; // 次要正文、提示文本
--color-text-4: #c2c2c2; // 辅助文本、禁用文本、占位符placeholder、提示文本

image.png

相比之下，个人比较喜欢arco的命名方式，简单、易记、简短、优雅、统一【color位置】

css变量定义

按钮 Button 对比

先简单对比下各自按钮的props，按钮能大概看出两者的设计理念和规范性

Element Plus image.png Arco Design Vue

image.png Element一直以简单易用受欢迎，通过上面对比，个人感觉Arco的更简洁，更易用，Element Plus的props显得有些混乱，很容易写成以下代码：

js
复制代码
<template>
  <el-button type="primary" circle round text link> 按钮 </el-button>
</template>

按钮形状没有进行归集，而且要经常性看文档，再来看看arco的

屏幕截图 2023-10-26 233557.png

对形状等进行了归类，对ts提示友好很多，你不需要记有什么形状，你只需要记住shape就行了，详细点的自己去对比下

还有就是扩展性，比如以后我想加个菱形的形状，像element来说要新增一个属性，会造成props属性越来越多，对于arco来说，只需要在shape多加一个属性值就行，而且这对于组件内部的封装逻辑也会清晰很多，也更容易去维护

Row/Col 组件对比

Element Plus

屏幕截图 2023-10-26 234445.png

Arco

image.png

说实话，我不太喜欢element对align的值篡改，css的align的值就是 start | center | end | stretch，如果我给row加了flex-direction: column;属性，那align就不是top或者bottom的含义了

Card 组件对比

Element Plus

image.png

Arco

image.png

header一般指的是头部的意思，Element Plus在这里把它当做标题，标题我觉得用title更合适一些，header表示整个头部

描述列表 Descriptions 组件对比

Element Plus

image.png

Arco

image.png

Arco支持data属性，同时也支持插槽形式, 且支持align文字对齐，这个很方便，更多细节和功能自己研究，Element Plus的DescriptionsItem有align和label-align，不过我认为放在Descriptions上更合适

表格 Table 组件对比

Element Plus

这个不多说了，熟悉的人都比较了解，Element 表格是没有自带分页的

Arco

image.png

Arco支持columns属性，通过配置形式生成，自带分页，pagination属性完全继承分页组件的props(组件库很多用到了继承思维，这个很好)，pagination里面可以写onChange和onPageSizeChange事件，这对hooks封装非常合适，arco目前还支持表格拖拽【实验阶段】

Select 组件对比

虚拟选择器是单独拆一个组件 el-select-v2

Arco支持options属性，通过配置生成下拉选项，不需要插槽的形式，其中每项option可以配置tag-props，这里是直接继承tag组件的props，扩展性很好，功能丰富，更多细节功能自己去对比

image.png

image.png

输入框系列

image.png

数字输入框 InputNumber 对比

Element Plus

image.png Arco

Element Plus没有格式化展示功能，扩展性一般，solt也很少

Arco的格式化展示示例，如果想要在数字后面加%等符号，格式化会非常方便，solt扩展丰富

image.png

image.png

抽屉 Drawer 组件对比

Element Plus

image.png

image.png

Arco

image.png

image.png

Arco的抽屉自带确认取消按钮，这对我们平时开发带来了很大便捷性，而且这两个按钮通过ok-button-props和 cancel-button-props继承按钮组件的props，width和height属性相对于size来说，语义更好

Arco还支持函数式抽屉，这是Element Plus不具备的，具体自己研究

image.png

Modal 对比 Dialog / MessageBox

Element Plus

image.png

image.png

Arco

image.png

Arco的Modal相当于Element Plus的Dialog和MessageBox整合，但是Element的扩展性略有欠缺，首先确认取消按钮没能继承button组件，Arco是能够继承的，此外Arco支持拖拽，自定义动画等功能

Arco函数调用

image.png

image.png

tsx方式

image.png

具体可以看看这篇文章 vue3 配合 tsx 优雅的弹窗方案

触发器 Trigger

Element Plus 依赖于popper.js，很多配置起来很麻烦且效果不佳，比如 # TreeSelect； arco 触发器组件，功能很强

社区大量的 issue

截止今天，Element Plus 仍有 1.3k 的 issue，这些 issue 中有除去建议、讨论跟功能请求，粗略估计还有几百个 bug 仍未解决。

积重难返的数据展示组件

直至今天，Element-Plus 的虚拟化功能还不能完全面向生产，同时，还能吐槽的一点就是虚拟化表格组件被官方命名 el-table-v2 ，既然有了 v2 是不是后续还会出现 v3、v4、v5？个人只能猜测表格组件为了解决性能问题并不能在原来的组件上很好的兼容向后开发，只能进行 copy 然后 rewrite，同时组件在命名上并没有经过太多的考量而被命名为 v2。

image.png

事实上大部分Element Plus 的大部分数据展示组件都会遇到性能问题，比如选择框的下拉选项，树形选择，树表格，这些组件设计之初并没有对性能问题进行规划，之后为了解决这些问题，没有选择在原有的组件添加 prop 去开关虚拟化进行兼容，而是对外开放新的组件。

image.png

相对于arco来看 考虑的相对丰富，且性能上提高不少；

image.png

image.png

image.png

主题定制性

描述

Arco的生态中，有 DesignLab风格配置平台，能够快速针对组件样式进行diy，能够快速制定出所需样式风格

image.png

image.png

虽然官方主题不是线性主题，但是通过DesignLab平台，你能够快速制定出一套线性主题，此外，官方主题中还有多套线性主题，同时在主题商店中，目前已经有上千套主题(在 官网 右下角处有个切换主题风格的按钮，可自行预览下)，都可通过npm方式直接下载使用【主题这个思想也是值得我们借鉴的，当前针对主题的讨论 很敏感 这种思想和方式 其实也算一种选择】

AI点评

image.png

image.png

image.png

avatar
文章
阅读
粉丝