一、要求
项目需要根据不同的类型展示不同的色调,其中有以下三种展示情况:
1.同色调字体
2.同色调字体;同色调圆点
3.同色调字体;同色调左边框;同色调背景,透明度0.15
二、 实现
1.定义变量
// rgb参数
@executed: 51, 153, 31;
@stop: 153, 75, 31;
@executing: 153, 75, 31;
@waiting: 46, 75, 229;
@overtime: 229, 156, 46;
@warning: 235, 136, 76;
// 通用类名字段
@linkTypeName:executed,
stop,
executing,
waiting,
overtime,
warning;
// 类名对应颜色
@linkType: @executed,@stop,@executing,@waiting,@overtime,@warning;
2.样式渲染函数
.linkMixin(@className, @type){
// 字体颜色
.el-link--@{className} {
color: rgba(@type, 1)
}
// 圆点颜色
.@{className} {
background:rgb(@type)
}
// 左边框+背景
.tagDiv .el-link--@{className}{
border-left: 1px solid rgba(@type, 1);
background-color: rgba(@type, 0.15);
}
}
3.执行遍历事件
.loop(@index) when(@index<=@linklen){
.linkMixin(extract(@linkTypeName, @index), extract(@linkType, @index));
.loop(@index+1)
}
.loop(1); // 这个一定要写,不然不会调用