更新记录

1.0.0（2025-01-25）

支持自定义图片的评分来咯~

平台兼容性

uni-app

其他

thea-rate

介绍

自定义图片的评分组件 ——by妖妖

使用说明

template中添加组件

<Rate :value.sync="value1" :size="30" :count="6"></Rate>
<view>
    更换图片
    <Rate :value="'2.3'"
     fullUrl="/static/icon-heart-full1.png"
     harfUrl="/static/icon-heart-harf1.png"
     emptyUrl="/static/icon-heart-empty1.png"
    ></Rate>
</view>

script中添加引用

import Rate from '@/components/Rate/Rate.vue'
export default {
    data() {
        return {
            value1: 3.3
        }
    },
    methods: {

    }
}

属性说明

demo展示

<template>
    <view>
        <view>
            基础评分
            <Rate :value.sync="value1"></Rate>
        </view>
        <view>
            自定义大小
            <Rate :size="50"></Rate>
        </view>
        <view>
            自定义间距
            <Rate :gutter="30"></Rate>
        </view>
        <view>
            自定义数量
            <Rate :count="10"></Rate>
        </view>
        <view>
            只读
            <Rate readonly></Rate>
        </view>
        <view>
            更换图片
            <Rate :value="'2.3'"
             fullUrl="/static/icon-heart-full1.png"
             harfUrl="/static/icon-heart-harf1.png"
             emptyUrl="/static/icon-heart-empty1.png"
            ></Rate>
        </view>
    </view>
</template>

<script>
    import theaRate from '@/components/thea-rate/thea-rate.vue'
    export default {
        data() {
            return {
                value1: 3.3
            }
        },
        methods: {

        }
    }
</script>

<style>
page {
    padding: 30rpx;
    color: #999;
    line-height: 60rpx;
}
</style>

备注

有什么需要优化的可以提，也可以自己根据实际情况修改