更新记录

1.0.3（2025-04-06） 下载此版本

干掉无用图片

1.0.2（2025-04-06） 下载此版本

修正说明文挡

1.0.1（2025-04-06） 下载此版本

干掉组件警告

平台兼容性

uni-app

uni-app x

hbxw-score评分组件

介绍

一个功能丰富的评分组件，支持自定义星星样式、半星选择、只读模式等特性。

使用说明

在 template 中使用组件

<template>
  <hbxw-score v-model="score" />
</template>

属性说明

事件说明

使用示例

<template>
 <view class="container">
  <view class="demo-item">
   <text class="title">基础用法</text>
   <hbxw-score v-model="score1" />
  </view>

  <view class="demo-item">
   <text class="title">自定义最大星级</text>
   <hbxw-score v-model="score2" :max="7" />
  </view>

  <view class="demo-item">
   <text class="title">支持半星选择</text>
   <hbxw-score v-model="score3" :allow-half="true" />
  </view>

  <view class="demo-item">
   <text class="title">只读模式</text>
   <hbxw-score v-model="score4" :readonly="true" />
  </view>

  <view class="demo-item">
   <text class="title">自定义星星样式</text>
   <hbxw-score 
    v-model="score5" 
    :size="36"
        :imageStyle="1"
   />
      <hbxw-score
       v-model="score5" 
       :size="36"
        :imageStyle="2"
      />
  </view>

  <view class="demo-item">
   <text class="title">自定义星星图片</text>
   <hbxw-score 
    v-model="score6" 
    :size="36"
    :activeImage="custom_star_active"
    :voidImage="custom_star"
   />
  </view>
 </view>
</template>

<script>
  import custom_star_active from '/static/hbxw-score/custom_star_active.png'
  import custom_star from '/static/hbxw-score/custom_star.png'
 export default {
  data() {
   return {
    score1: 3,
    score2: 4,
    score3: 3.5,
    score4: 4,
    score5: 5,
        score6: 3
   }
  },
    watch: {
     score1(val) {
        console.log(val)
      } 
    }
 }
</script>

<style>
.container {
 padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.demo-item {
 margin-bottom: 30rpx;
}
.title {
 font-size: 28rpx;
 color: #666;
 margin-bottom: 20rpx;
 display: block;
}
</style>