关于在使用elementUI开发项目中,需要结合需求修改样式的问题

使用饿了么官方出版的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>


其实功能没有多少,具体效果可以为:名称:input/select/button。。。都可以。


本人水平有限,欢迎交流和批评。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容