说说对element-plus组件库和官网的使用感受(吐槽向)

7,092 阅读3分钟

前言

吐槽一下最近的 element-plus,每天进去看一下文档就是一副新面孔,真的是日新月异(贬义)各种新的引用方式。最近一直在写一些小项目,每一次都得花好多时间在 element-plus 的配置或者是主题色切换上。

属性文档样式

首先是相比 element-ui,我觉得 element-plus 的文档真的没有 element-ui 的好看,element-plus的属性文档中有了间隔的斑马纹,虽然可以理解斑马纹可以提升阅读感,但是当一大段的文档都是灰色的时候与整体蓝白的风格还是让人感觉很不协调。我个人认为如果灰色更加淡一点会好看很多。

element-plus属性文档样式

image.png

element-ui属性文档样式

image.png

滚动条样式

官方文档右侧的滚动条,在chrome中element-ui是对滚动条做了样式的,比较细长优雅,和整体的样式风格融合的很好,而element-puls则是原生滚动条。

element-plus 滚动条样式

image.png

element-ui 滚动条样式

image.png

示例代码的展示

在element-ui中,示例代码的展示是通过鼠标移入组件demo框框的底部,然后会有一个渐入的动画,整体感觉很丝滑。且还有一个细节,当展开的示例代码超过了屏幕的显示范围,关闭示例代码的按钮还会为你固定在屏幕底部!

element ui的展开动画

1.gif

element ui的底部固定

1.gif

而在element-plus中,将展开示例代码的操作移动到了组件demo右上角,第一次用的时候感觉真滴难受,毕竟复制粘贴官方示例代码是一个使用频率很高的操作(CV工程师😂),而且也没有动画效果,就是一个普普通通的展开,甚至代码风格个人认为都没有element-ui的好看。

element-plus的展开代码位置

image.png

element-plus的代码风格

image.png

element-ui的代码风格

image.png

官网的翻译问题

上面说的都是样式方面的对比,而更离谱的是现在element-plus很多页面和选项都没有了中文翻译,虽然理解程序员要养成看英文文档的习惯,但是和element-ui清晰直观的中文相比起来,反差简直不要太大。

首先是 指南页面 ,当你点击进阶内的任意一项,官网都会自动切换为英文,并且在这几项里面你是无法选择中文的。应该是还没翻译好所以选择不了。

1.gif image.png

英文就算了,还有错别字 image.png

还有就是组件页面也有大量未翻译的描述,下图是我在已经切换中文的模式下看到的。(最近更离谱,几乎全部组件都是英文描述了)

element-plus table组件的右侧导航

image.png

element-plus table组件的描述

image.png

组件的一些bug

element-plus输入框组件按钮插槽样式问题,在实际开发中也有同样的问题

image.png

总结

可以说element-ui官网的体验感都是靠很多的细节去堆砌出来的,而这些细节舍弃掉一些就会降低很多体验感,虽然可以理解也许是这么做对于代码内部的整洁性或健壮性有帮助,但是官网的主要作用就是用来学习和理解这个组件库的使用方式的,也希望 element-plus 可以慢慢优化的越来越好,最起码中文翻译先搞齐全了。作为开发者,对于开源项目当然是积极参与贡献啦,虽然element-plus目前有些小问题,但我一直认为element组件库是vue生态中永远滴神

我是新人oil,每周都会更新原创文章,期待你的关注噢!