从接触Vue到好友推荐使用Element-UI前端控件,差不多有几个月的时间了。而这一段时间之中,最让我感到痛苦的就是,Element-UI的前端团队(饿了么的前端团队)实在是很不给力,bug频出。

本文这里随便列出该UI组件的一些不足之处,希望看到此文的饿了么前端团队能够吸收改正:

1. 采用px控制控件的高和宽,而且有些还是hard code,非常缺少灵活性。比如select的高度,是由硬编码算出来的,这样的代码从外面调节CSS是很难做到界面的一致,必须修改控件的代码才能做到整体界面统一。

下面是select中调整控件高度的代码,注意给input.style.height赋值的那句,里面的数字10,看到这个数字,真想骂人:
resetInputHeight() {
this.$nextTick(() => {
if (!this.$refs.reference) return;
let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
const tags = this.$refs.tags;
input.style.height = this.selected.length === 0
? sizeMap[this.selectSize] + 'px'
: Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px';
if (this.visible && this.emptyText !== false) {
this.broadcast('ElSelectDropdown', 'updatePopper');
}
});
},

而这样造就出来的控件,在不修改任何CSS的情况下还勉强看的过去,一旦从外面修改CSS,比如调整一下paddingTop和paddingBottom,整个界面看起来想狗啃过一样,参差不齐。而且,这套UI线条有些粗,如果要调细一些,到处是坑,气得我真想从头自己写一套。


2. 最可恶的是字体,全部是固定px的,真想上【三字经】。恐怕是怕换成em/rem后hold不住界面了吧,毕竟px最简单也最容易控制组件的外观的。
.el-breadcrumb {
font-size: 14px;
line-height: 1; }
.el-breadcrumb::before, .el-breadcrumb::after {
display: table;
content: ""; }
.el-breadcrumb::after {


3. 每次升级,bug一堆。这次从1.4.9升级到2.0.4,快要来我的老命了,很多地方都要检查一遍,一不小心就中招,而且官方提供的升级不兼容性信息很有限,比如没有提及任何关于date-range-picker,但今天走查界面时发现这个控件长得超级奇怪,最后查看源代码发现,此控件宽必须是350px,奶奶的,我无语了,你们自个儿看:
&.el-input,
&.el-input__inner {
width: 220px;
}

@include m((daterange, timerange)) {
&.el-input,
&.el-input__inner {
width: 350px;
}
}

@include m(datetimerange) {
&.el-input,
&.el-input__inner {
width: 400px;
}
}

这不是明显的在规定使用者在选择日期范围时必须是350px宽的组件,谁见过这样的UI组件,我涨知识了。

没什么好说的了,尽管很佩服他们乐于奉献的精神,但仍然希望他们能在前端的路上更精进一些,像这样的水平,拿出来前内部先找个高人给指点一下。不然留下的只是骂名!