通過element的ColorPicker 顏色選擇器修改文本顏色

知識點：

• VUE中的樣式綁定
• CSS的自定義變量

方法：

第一步：html部分 標(biāo)簽綁定動態(tài)style

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

第二步： script部分 data設(shè)置變量

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

第三步： style部分 通過var函數(shù)方法引用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" >
  <!-- 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,
      }">
        我是一行簡單的文本，請點擊下方按鈕調(diào)整我的顏色
        <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()函數(shù)在樣式中根據(jù)js變量改變（用于主題切換）
• ?Vue如何使用CSS自定義變量