组件示例

要做一个这样的组件，圆点颜色作为参数

一、没有引入css变量之前的写法（不建议！！！）

每加一个色值，就要加一个选择器 ❌

1. less

.name {
    position: relative;

    &:after {
        position: absolute;
        top: 6px;
        left: -14px;
        width: 6px;
        height: 6px;
        content: '\a0';
        background-color: #26e2c7;
        border-radius: 50%;
    }
}

.c-F5222D {
    &:after {
        background-color: #f5222d;
    }
}

.c-FAAD14 {
    &:after {
        background-color: #faad14;
    }
}

2. comp.vue

<span class="name" :class="item.color">{{ item.name }}：</span>

3. index.vue传递给组件的参数

{
    name: '高风险',
    val: 0,
    color: 'c-F5222D'
}, {
    name: '已启动',
    val: 0,
    color: 'c-FAAD14'
}

二、色值抽取成css变量之后

.vue文件中定义--color；less文件中var函数获取

1. less

.name {
    position: relative;

    &:after {
        position: absolute;
        top: 6px;
        left: -14px;
        width: 6px;
        height: 6px;
        content: '\a0';
        background-color: var(--color, #26e2c7); // 第二个参数为默认值
        border-radius: 50%;
    }
}

2. comp.vue

<span
    class="name"
    :style="{'--color': item.color}"
>{{ item.name }}：</span>

3. index.vue传递给组件的参数

{
    name: '高风险',
    val: 0,
    color: '#F5222D'
}, {
    name: '已启动',
    val: 0,
    color: '#FAAD14'
}

参考

[阮一峰老师：# CSS 变量教程]