vue+element 动态修改伪类样式 --Var()

使用场景：针对不同的数据来源，对应的选择框的√ 显示不同的颜色，如图所示

蓝色，非禁用且很久之前购买

灰色，禁止修改选项

红色，非禁用且近期购买

困难点：需要对element-UI的选择框的伪类进行修改，且颜色是动态的

解决方案：

       1. 在vue的标签处通过 ‘--var中定义的命名’：“props中对应的样式变量”(可以写函数，也可字符串)

      2. var( )函数用于插入自定义的属性值，如果一个属性值被多处使用，可用此引入

              

• vue中定义对应颜色

<el-checkbox v-model="checked" :style="{ '--fullColor': getColor(1, false) }">备选项1</el-checkbox>

<el-checkbox v-model="checked"
 :style="{ '--fullColor': getColor(2, true) }" :disabled="true" >备选项2</el-checkbox >

<el-checkbox v-model="checked" 
 :style="{ '--fullColor': getColor(3, false) }" :disabled="false">备选项3</el-checkbox >
 

• 设定不同情况下返回不同的颜色

 methods: {
    getColor (e, type) {
      console.log(e)
      if (e == 1 && !type) {
        // 购买过的颜色
        return 'blue'
      } else if (e == 2 && type) {
        // 禁止
        return '#ccc'
      } else if (e == 3 && !type) {
        // 最新购买
        return 'red'
      }
    },
}

•  对应样式写入var声明的变量进行引用

/deep/ .el-checkbox__inner::after {
  border: 1px solid var(--fullColor); // 变化的参数
  border-left: 0;
  border-top: 0;
}