使用餓了么官方出版的elementUI近半年了，提升的開發(fā)速率可不是一點(diǎn)半點(diǎn)，那真是蹭蹭的往上竄。但是在開發(fā)過程中會(huì)遇到一種情況：需要結(jié)合自己公司的業(yè)務(wù)，修改element的樣式，這就尷尬了。。。造成這種情況的原因是因?yàn)閑lement的組件里面都有自己的樣式，scoped控制了外界樣式和當(dāng)前組件不互通來防止組件間樣式重疊或沖突，所以你在當(dāng)前頁面給<el-xxx>組件寫class，然后利用class去調(diào)整樣式是不可行的。
? ? ? ? 在剛開始開發(fā)過程中，嘗試了三種解決方案：
1、修改源碼：嘗試著去修改element源碼，修改其內(nèi)部樣式為結(jié)合自己業(yè)務(wù)想要的樣式。但是假如修改了<el-input>的基礎(chǔ)樣式，我只想作用于某一模塊中，而不像全局都跟著修改這樣的話，可以在源碼中添加邏輯，增加一個(gè)參數(shù)，讓<el-input>知道是不是該特殊組件，然后可以利用三元表達(dá)式加上相應(yīng)的特殊class來執(zhí)行其css樣式。個(gè)人感覺此方式個(gè)別小需求還可以，由于自己水平有限，不敢大動(dòng)源碼，怕傷害到本身，所以棄之。
2、打補(bǔ)丁：在開發(fā)項(xiàng)目過程中，新建了一個(gè)patch.css的文件，并在全局引用。這樣的話就突破了scope關(guān)鍵字的限制，直接開啟上帝視角，想改哪里就改哪里。這樣的方式不會(huì)破壞源碼，當(dāng)然這樣的方式會(huì)比較亂，你還要結(jié)合看當(dāng)前作用的.el-xxx--xxx .el-xxx--xxx .el-xxx 等一大串的css樣式，相互結(jié)合形成的樣式。而且你寫新的樣式去覆蓋el的老樣式時(shí)，需要特別注意css權(quán)重的問題，一定要比el組件內(nèi)的權(quán)重高，不然不會(huì)生效的。
@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時(shí)的背景處理
.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;
}
// 側(cè)邊nav及其動(dòng)態(tài)樣式
.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;
}
// 左側(cè)導(dǎo)航li最低不能為200，修改為150
.el-submenu .el-menu-item {
? min-width: $dim_width_large3;
}
// 修改input篩選條件區(qū)域
.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;
}
這是我在項(xiàng)目中結(jié)合一些特殊的點(diǎn)來做的修改。
3、封裝自己的組件：拿來主義，用別人現(xiàn)成的永遠(yuǎn)都要受別人的限制和條件約束。畢竟吃人嘴短拿人手軟?。?！自己寫自己的用著才最舒服，當(dāng)然也最麻煩。最好結(jié)合自己的項(xiàng)目走向，做一些能夠長期使用并且能夠多平臺(tái)使用的組件會(huì)更好。寫之前可以參考下element的組件，它提供了哪些api，輸入?yún)?shù)需要什么，使用場景是什么，你想做成什么樣的功能，下面是我自己寫的一個(gè)比較簡單的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>
