当前位置:   article > 正文

Element组件Cascader、DatePicker、Select修改局部样式,不影响全局的方式_el-cascader 样式

el-cascader 样式

Element官网展示所有组件,都是白色主题,如果我们需要修改整个项目中主题颜色,只需要定义全局的Css就可以实现,但是,如果我们在某个页面更换主题颜色(如深色主题),这样如果从当前页面跳转到其它页面之后,会使其它页面主题风格都发生改变,所以我们既需要改变当前页面,又不影响其它页面的风格。

1.0 通过JavaScript加载某些样式

// 只在页面生成之前有效,如果页面二次创新,就会失效
beforeCreate() {
     document.querySelector('.el-main').setAttribute('style', 'background-color: #002a4b !important;');
},
destroyed() {
     document.querySelector('.el-main').setAttribute('style', 'background-color: #fff;');
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

如上,我们在页面加载前通过DOM加载一些样式,离开当前页面之后又还原,这样是可以实现,但是页面也不仅仅是一两个class选择器那么简单,所以可以采纳,但并不是好的办法,而且如果当前页面修改之后刷新,这个样式又会消失,所以还需要加入以下代码:

mounted(){
      // 防止页面刷新丢失
      document.querySelector('.el-main').setAttribute('style', 'background-color: #002a4b !important;');
      // 页面数据初始化调用方法
      ... 
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2.0 通过组件提供的方法实现

  1.0 Cascader 级联选择器,DatePicker 日期选择器
在这里插入图片描述
  选项的容器并不在挂载的div#app中,而是div#app的兄弟元素,我们在组件中设置样式的时候,加上了scoped,作用域都是局限在div#app中,所以设置的样式就无法正常作用到选项内容的div上。
  但是我们查看组件属性,可以看到这么个东西,如下图:
在这里插入图片描述
  好,东西有了,但很多人和我一样也不知道咋样,没见过示例啊,下面就介绍怎么用,首先我们需要在在代码中添加下面这个属性。

<el-cascader style="margin-right: 12px"
     v-model="searchData.areaCode"
     :level="3" @οnchange="regionCodeChange"
     :checkStrictly="true" popperClass="area-choose"
     placeholder="请选择所在地区"
></el-cascader>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述
  这样我们自己定义的类选择器也就有了,然后我们只需要在当前页面进行修改就行,如下:

.area-choose{
        background-color: #002a4b !important;
        border: 1px solid #34cdf8;
        .el-cascader-menu{
            color: #34cdf8 !important;
        }
        .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
            background: #2f6ac1 !important;
        }
        .el-radio__inner {
            border: 1px solid #FFFFFF;
        }
        .el-cascader-node.is-selectable.in-active-path {
            color: #34cdf8;
        }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

  2.0 Select 选择器
在这里插入图片描述
  Select下拉框也一样,选项的容器并不在挂载的div#app中,而是div#app的兄弟元素,我们在组件中设置样式的时候,加上了scoped,作用域都是局限在div#app中,所以设置的样式就无法正常作用到选项内容的div上。
  but我们查看组件属性,可以看到这么个东西,如下图:
在这里插入图片描述
  该值默认为true,就出现了添加到body元素,而我们在id="app"内部就不能全局修改,否则会影响其它页面样式,所以

<el-select style="margin-right: 12px;"
       @change="blockNameChange"
       :popper-append-to-body="false"
       v-model="searchData.blockName" clearable
       placeholder="请选择景区" size="mini">
       <el-option
               v-for="item in blockNameList"
               :key="item.blockName"
               :label="item.blockName"
               :value="item.blockName">
       </el-option>
</el-select>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

  把该字段设置为false之后,如下:
在这里插入图片描述
  这样我们就可以在当前页面修改,而不会影响全局样式。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/120766
推荐阅读
相关标签
  

闽ICP备14008679号