用vant的icon组件实现高德评分样式

高德评分

效果

想再像一点的话就根据rate值加个class，调下颜色就好了

vue3组件

<template>
    <!-- 评分 -->
    <div class="rate-box">
        <div class="rate-star-list">
            <div class="rate-item" v-for="a in [1, 2, 3, 4, 5]" :key="a">
                <van-icon name="star" color="#fff" size="12" class="rate-item-icon" />
                <div
                    class="grey-bg"
                    v-if="rate < a"
                    :style="{ width: getGreyWidth(rate, a) }"
                ></div>
            </div>
        </div>
        <span class="rate-num">{{ rate }}</span>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Icon } from 'vant'
export default defineComponent({
    name:"mask",
    components:{
        [Icon.name]: Icon,
    },
    props:{
        rate:{
            type: Number,
            default: 1
        }
    },
    setup:(props, context)=>{
        const getGreyWidth = (rate:number, currentN:number)=> {
            const w = ((currentN - rate) / 1) * 12
            return w > 12 ? '12px' : `${w}px`
        }
        return {
            getGreyWidth
        }
    }
})
</script>
<style lang="less">
.rate-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.rate-star-list {
    display: flex;
    align-items: center;
    margin-right: 4px;
    .rate-item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 12px;
        height: 12px;
        background: #ff7a2d;
        border-radius: 2px;
        // padding: 2px;
        &-icon {
            transform: scale(0.76);
            z-index: 20;
        }
    }
    .rate-item:not(:last-of-type) {
        margin-right: 2px;
    }
    .grey-bg {
        position: absolute;
        // width: 6px;
        height: 12px;
        background: #cccccc;
        border-radius: 2px;
        top: 0;
        right: 0;
        z-index: 10;
    }
}
.rate-num {
    font-size: 12px;
    font-weight: 500;
    color: #ff7a2d;
    line-height: 16px;
    margin-right: 8px;
}

</style>

父组件引用

import Rate from './components/Rate.vue'
components: {
    Rate
}

<Rate :rate="4.5" />