技術標籤：Vueelementuivue

產品要求：根據使用者輸入的顏色，自動改變checkbox中勾選框顏色
餓了麼文件並沒有提供此方法，於是巧妙地利用css var動態生成顏色變數，掛載到父節點，於是就可以了

話不多說，先康康效果

  <el-checkbox-group v-model="val">
        <el-checkbox
          v-for="(item,index) in list"
          :key="index"
          :style="
 
{'--fill-color':'#334CD4'}"
          :label="item.title"
        />
  </el-checkbox-group>

style樣式(scss)

 ::v-deep .el-checkbox {
       .el-checkbox__label {
         color: var(--fill-color);
       }

       .el-checkbox__input.is-checked .el-checkbox__inner,
       .el-checkbox__input.is-indeterminate .el-checkbox__inner
 
 {
         background-color: var(--fill-color);
         border-color: var(--fill-color)
       }

       .el-checkbox__input.is-focus .el-checkbox__inner,
       .el-checkbox__inner:hover {
         border-color: var(--fill-color);
       }
     }