更新记录

1.0.0（2023-05-15） 下载此版本

score 评分组件

平台兼容性

属性说明

Tips

使用的是阿里的iconfont,不是uni-icon

平台差异

测试支持H5,微信小程序,APP;

理论支持其他平台,未测试nvue,

调用示例

<template>
    <view class="page-body">
        <view class="span-box">
            <view class="iden"></view>
            基础用法
        </view>
        <score-box v-model="value"></score-box>
        <view class="span-box">
            <view class="iden"></view>
            设置尺寸大小
        </view>
        <score-box :size="15" v-model="value"></score-box>
        <view class="span-box">
            <view class="iden"></view>
            设置评分数
        </view>
        <score-box v-model="value" :max="10"></score-box>
        <view class="span-box">
            <view class="iden"></view>
            设置星星间隔
        </view>
        <score-box v-model="value" :margin="20"></score-box>
        <view class="span-box">
            <view class="iden"></view>
            设置颜色（如果isImg为true则无效）
        </view>
        <score-box v-model="value" activeColor="red" color="#999999"></score-box>
        <view class="span-box">
            <view class="iden"></view>
            星星镂空状态
        </view>
        <score-box v-model="value" :isFill="true"></score-box>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                value: 3
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-body {
        margin: 0 20px;
    }

    .span-box {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .iden {
        width: 2px;
        height: 15px;
        background: #FA7819;
        margin-right: 10px;
    }
</style>