通过 element 的 ColorPicker 颜色选择器修改文本颜色

1
<div :style="{
2
            '--setColor': setColor,
3
            '--setBackground': setBackground
4
          }"
5
>
6
</div>

1
data(){
2
    return{
3
      setColor: "#fff",
4
      setBackground: "#eee"
5
  }
6
}

1
div{
2
    color: var(--setColor),
3
    background: var(--setBackground)
4
}

1
:style="{'--setColor': setColor,}
2
等同于
3
style="--setColor: #fff;"
4
等同于
5
.div {--setColor: #fff;}/*定义变量*/

1
 <script src="https://unpkg.com/vue@next"></script>
2
  <!-- import CSS -->
3
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
4
  <!-- import JavaScript -->
5
  <script src="https://unpkg.com/element-plus"></script>
6
  <div id="app">
7
    <template v-if="msg">
8
      <p>简单的颜色选择器</p>
9
      <h3>您选中的颜色是：{{stylecolor}}</h3>
10
      <div class="div-font" :style="{
11
        '--fontColor': stylecolor,
12
        '--bgColor': stylecolor,
13
      }">
14
        我是一行简单的文本，请点击下方按钮调整我的颜色
15
        <span class="div-bg">更改我的背景色</span>
16
      </div>
17

18
      <el-color-picker v-model="stylecolor" size="large" show-alpha />
19

20
    </template>
21

22
  </div>
23

24

25
  <script>
26
    const App = {
27
      data() {
28
        return {
29
          msg: true,
30
          stylecolor: "red",
31
        };
32
      },
33
    };
34
    const app = Vue.createApp(App);
35
    app.use(ElementPlus);
36
    app.mount("#app");
37

38
  </script>
39

40
  <style lang="scss">
41
    .div-font {
42
      /*读取变量*/
43
      color: var(--fontColor);
44
    }
45

46
    .div-bg {
47
      background-color: var(--bgColor);
48
    }
49
  </style>

1
<script src="https://unpkg.com/vue@next"></script>
2
  <!-- import CSS -->
3
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
4
  <!-- import JavaScript -->
5
  <script src="https://unpkg.com/element-plus"></script>
6
  <div id="app">
7
    <template v-if="msg">
8
      <p>简单的颜色选择器</p>
9
      <h3>您选中的颜色是：{{stylecolor}}</h3>
10
      <div class="div-font" :style="{
11
        '--fontColor': stylecolor,
12
        '--bgColor': stylecolor,
13
      }">
14
        我是一行简单的文本，请点击下方按钮调整我的颜色
15
        <span class="div-bg">更改我的背景色</span>
16
      </div>
17
      <el-color-picker v-model="stylecolor" size="large" show-alpha />
18
    </template>
19
  </div>
20
  <script>
21
    const App = {
22
      data() {
23
        return {
24
          msg: true,
25
          stylecolor: "red",
26
        };
27
      },
28
    };
29
    const app = Vue.createApp(App);
30
    app.use(ElementPlus);
31
    app.mount("#app");
32
  </script>
33
  <style lang="scss">
34
    .div-font {
35
      /*读取变量*/
36
      color: var(--fontColor);
37
    }
38
    .div-bg {
39
      background-color: var(--bgColor);
40
    }
41
  </style>