Element组件二次修改

发表于
Element组件二次修改

需求：

​ 在进行组件封装时，组件的样式需要从后端等异步的方式获取的数据去修改element组件中的样式。

方法：

​ 使用less的变量进行赋值，通过ref获取$el的样式修改less变量进行更新

如：

​ 修改时间选择器中placeholder的字体颜色

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <el-date-picker
    class="datePicker"
    ref="datePicker"
    v-model="dataSource.data"
    placeholder="日期选择器"
    type="date"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
  >
  </el-date-picker>
</template>
1
2
3
4
5
6
7
8
methods: {
  setElBackgroundColor(){
      this.$refs.datePicker.$el.style.setProperty(
        "--fontColor",
        this.dataSource.elFontColor
      );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
.datePicker{
  --fontColor: #fff;
  /deep/input::-webkit-input-placeholder {
    color: var(--fontColor) !important;
  }
  /deep/input::-moz-input-placeholder {
    color: var(--fontColor) !important;
  }
  /deep/input::-ms-input-placeholder {
    color: var(--fontColor) !important;
  }
}