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

知识点：

• VUE中的样式绑定
• CSS的自定义变量

方法：

第一步：html部分 标签绑定动态style

<div :style="{
            '--setColor': setColor,
            '--setBackground': setBackground
          }"
>
</div>

第二步： script部分 data设置变量

data(){
    return{
      setColor: "#fff",
      setBackground: "#eee"
  }
}

第三步： style部分 通过var函数方法引用data变量

div{
    color: var(--setColor),
    background: var(--setBackground)
}

代码来源：匹诺曹Er，文章：https://www.jianshu.com/p/1ecc3b1ce375

原理刨析

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

示例代码

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

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

    </template>

  </div>


  <script>
    const App = {
      data() {
        return {
          msg: true,
          stylecolor: "red",
        };
      },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");

  </script>

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

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

效果

拓展阅读

• 2021-08-11 Vue 利用css的var() 和attr()函数在样式中根据js变量改变（用于主题切换）
•  Vue如何使用CSS自定义变量