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

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;');
}

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

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

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

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

"margin-right: 12px"
     v-model="searchData.areaCode"
     :level="3" @οnchange="regionCodeChange"
     :checkStrictly="true" popperClass="area-choose"
     placeholder="请选择所在地区"
>

Element组件Cascader、DatePicker、Select修改局部样式,不影响全局的方式_第3张图片
  这样我们自己定义的类选择器也就有了,然后我们只需要在当前页面进行修改就行,如下:

.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;
        }
}

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

"margin-right: 12px;"
       @change="blockNameChange"
       :popper-append-to-body="false"
       v-model="searchData.blockName" clearable
       placeholder="请选择景区" size="mini">
       "item in blockNameList"
               :key="item.blockName"
               :label="item.blockName"
               :value="item.blockName">
       

  把该字段设置为false之后,如下:
Element组件Cascader、DatePicker、Select修改局部样式,不影响全局的方式_第6张图片
  这样我们就可以在当前页面修改,而不会影响全局样式。

你可能感兴趣的:(前端开发,#,ElementUI,#,CSS,vue,javascript,css)