scss @mixin用法，画一个彩色圆点，vue filter 过滤颜色

Posted 2020-12-11 叶子玉

<div class="status-name">
    <span class="status" :class="item.status | statusColorFilter">{{ item.status_display }}</span>
    <span class="name">{{ item.name }}</span>
</div>

filters: {
     statusColorFilter(status) {
        const colorMap = {
            ‘0: ‘status-green‘, // 正常
            ‘1‘: ‘status-orange‘,  // 待发起
            ‘2‘: ‘status-grey‘, //草稿
            ‘3‘: ‘status-blue‘, // 审批中
        }
        return colorMap[status]
    }
},

$color-blue: #4686F2;
$color-green: #1CB77B;
$color-red: #F14C5D;
$color-grey: #666666;
$color-white: #FFFFFF;
$color-orange: #F2B044;
$color-tint-blue: #EFF5FF;

// 彩色小圆点，$color：颜色变量，外部传入
@mixin status-dot($color) {
    color: $color;
    &:before {
        content: ‘‘;
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: $color;
        margin-right: 4px;
        vertical-align: middle;
    }
}
.status {
    @include status-dot($color-blue);
}

.status-green {
    @include status-dot($color-green);
}
.status-orange {
    @include status-dot($color-orange);
}
.status-grey {
    @include status-dot($color-grey);
}
.status-blue {
    @include status-dot($color-blue);
}
.status-red {
    @include status-dot($color-red);
}