使用饿了么官方出版的elementUI近半年了，提升的开发速率可不是一点半点，那真是蹭蹭的往上窜。但是在开发过程中会遇到一种情况：需要结合自己公司的业务，修改element的样式，这就尴尬了。。。造成这种情况的原因是因为element的组件里面都有自己的样式，scoped控制了外界样式和当前组件不互通来防止组件间样式重叠或冲突，所以你在当前页面给<el-xxx>组件写class，然后利用class去调整样式是不可行的。
在刚开始开发过程中，尝试了三种解决方案：
1、修改源码：尝试着去修改element源码，修改其内部样式为结合自己业务想要的样式。但是假如修改了<el-input>的基础样式，我只想作用于某一模块中，而不像全局都跟着修改这样的话，可以在源码中添加逻辑，增加一个参数，让<el-input>知道是不是该特殊组件，然后可以利用三元表达式加上相应的特殊class来执行其css样式。个人感觉此方式个别小需求还可以，由于自己水平有限，不敢大动源码，怕伤害到本身，所以弃之。
2、打补丁：在开发项目过程中，新建了一个patch.css的文件，并在全局引用。这样的话就突破了scope关键字的限制，直接开启上帝视角，想改哪里就改哪里。这样的方式不会破坏源码，当然这样的方式会比较乱，你还要结合看当前作用的.el-xxx--xxx .el-xxx--xxx .el-xxx 等一大串的css样式，相互结合形成的样式。而且你写新的样式去覆盖el的老样式时，需要特别注意css权重的问题，一定要比el组件内的权重高，不然不会生效的。
@import "vars";
// selct和input保持宽度一致
.el-select .el-input__inner, .el-input--suffix .el-input__inner {
padding: 0 $dim_spacing_large5;
}
.el-input__inner {
padding: 0 $dim_spacing_large5;
}
// 筛选条件板块样式
.el-form {
background: $color_fg_contrast;
border: $dim_radius_small5 solid $color_bg_white3;
border-radius: $dim_radius_small3;
padding: $dim_spacing_medium $dim_spacing_large5;
margin-bottom: $dim_spacing_large2;
}
// table边框处理
.el-table {
border: $dim_radius_small5 solid $color_bg_white3;
}
// table-bg切换tabs时的背景处理
.tabs-bg .el-tabs__item.is-active {
color: $color_fg_contrast;
background: $color_bg_white2;
}
.tabs-bg .el-tabs__item:hover {
color: $color_fg_primary;
}
// 侧边nav及其动态样式
.el-submenu__title:hover {
background-color: $color_bg_black2;;
color: $color_fg_contrast;
}
.el-submenu__title {
color: $color_bg_white4;
}
.el-menu {
background-color: $color_bg_black3;
border-right: $dim_radius_small5 solid $color_bg_black3;
}
.el-submenu .el-menu-item {
background-color: $color_bg_black1;
color: $color_bg_white4;
text-align: center;
}
.el-menu-item:hover, .el-menu-item.is-active {
background-color: $color_bg_black2;
color: $color_fg_contrast;
}
// 左侧导航li最低不能为200，修改为150
.el-submenu .el-menu-item {
min-width: $dim_width_large3;
}
// 修改input筛选条件区域
.el-form-item__content {
line-height: $dim_height_small0;
}
.el-form-item {
margin-bottom: $dim_spacing_medium;
}
.el-form--inline .el-form-item__label {
color: $color_fg_primary;
font-size: $dim_font_medium1;
}
这是我在项目中结合一些特殊的点来做的修改。
3、封装自己的组件：拿来主义，用别人现成的永远都要受别人的限制和条件约束。毕竟吃人嘴短拿人手软！！！自己写自己的用着才最舒服，当然也最麻烦。最好结合自己的项目走向，做一些能够长期使用并且能够多平台使用的组件会更好。写之前可以参考下element的组件，它提供了哪些api，输入参数需要什么，使用场景是什么，你想做成什么样的功能，下面是我自己写的一个比较简单的field组件。
<template>
<div>
<label :class="(labelClass || 'label')+(toLines?'' : 'inline')">{{ label+(noColon)?'':':' }}</label>
<div :class="twoLines?'twoLines':'inline'">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'field',
props: ['label', 'labelClass', 'twoLines', 'noColon']
}
</script>
<style>
@import "../../assets/css/vars.scss";
@import "../../assets/css/font.scss";
.label {
@extend .font-bold;
width: $dim_width_large1;
}
</style>
网友评论