# Rate 评分

评分组件,用于对事物进行评级操作或对评价进行展示

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

<pi-rate />

export default {
  data() {
    return {
      syncRate: 3,
      disRate: 2
    }
  }
}

1
2
3
4
5
6
7
8

# 自定义颜色

unselectedColor 设置未被选中图标的颜色；

selectedColor 则是已被选中图标的颜色。

< <view class="pi-pd-24">
  <view class="pi-align-center">
    未选中 ( unselectedColor )：
    <pi-rate v-model="syncRate1" unselected-color="#ff2d51" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    选中 ( selectedColor )：
    <pi-rate v-model="syncRate1" selected-color="#ff508a" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    两者都有：
    <pi-rate v-model="syncRate1" unselected-color="#ff2d51" selected-color="#ff508a" />
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 自定义图标

unselectedIcon 设置未被选中图标的颜色；

selectedIcon 则是已被选中图标的颜色。

<view class="pi-pd-24">
  <view class="pi-align-center">
    未选中 ( unselectedIcon )：
    <pi-rate v-model="syncRate2" unselected-icon="praise" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    选中 ( selectedIcon )：
    <pi-rate v-model="syncRate2" selected-icon="praise" selected-color="#ff508a" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    两者都有：
    <pi-rate
      v-model="syncRate2"
      unselected-icon="praise"
      selected-icon="praise-fill"
      unselected-color="#ff2d51"
      selected-color="#ff508a"
    />
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 图标大小

通过 size 属性控制图标的大小，默认单位 rpx 。

<pi-rate v-model="syncRate" selected-icon="biaoxing" selected-color="#ff508a" /><view class="pi-pd-24">
  <view class="pi-align-center">
    size = "24"：
    <pi-rate v-model="syncRate" size="24" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    size = "48"：
    <pi-rate v-model="syncRate" size="48" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    size = "72"：
    <pi-rate v-model="syncRate" size="72" />
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 自定义数量

通过 count 属性控制图标的数量，使之适用于不同的评分制。

<view class="pi-pd-24">
  <view class="pi-align-center">
    count = "5"：
    <pi-rate v-model="syncRate3" :count="5" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    count = "8"：
    <pi-rate v-model="syncRate3" :count="8" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    count = "10"：
    <pi-rate v-model="syncRate3" :count="10" />
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 调整间距

gutter 属性可以设置每个图标之间的间距。

<view class="pi-pd-24">
  <view class="pi-align-center">
    gutter = "20"：
    <pi-rate v-model="syncRate3" :gutter="20" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    gutter = "40"：
    <pi-rate v-model="syncRate3" :gutter="40" />
  </view>
  <view class="pi-align-center pi-mg-tb-16">
    gutter = "60"：
    <pi-rate v-model="syncRate3" :gutter="60" />
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# API

# Rate Props

名称	描述	类型	必选	默认值
v-model/value	初始值	—	`false`	-
customStyle	自定义样式，对象形式（默认值：{}）	`Object`	`false`	-
customClass	自定义样式类，字符串形式（''）	`String`	`false`	-
count	评分总数	`String \| Number`	`false`	5
size	图标的尺寸，单位rpx	`String \| Number`	`false`	36
gutter	星星之间的间距，单位rpx	`String \| Number`	`false`	12
unselectedColor	未选中的颜色	`String`	`false`	'#b2b2b2'
selectedColor	选中的颜色，不设置默认为主题色	`String`	`false`	-
unselectedIcon	未选中的图标名称	`String`	`false`	'biaoxing'
selectedIcon	选中的图标名称	`String`	`false`	'biaoxingfill'
disabled	是否禁用评分	`Boolean`	`false`	false
disabledColor	禁用时的颜色	`String`	`false`	'#c8c9cc'
readonly	是否只读	`Boolean`	`false`	false
classPrefix	类名前缀，用于使用自定义图标，默认为（pi-icon-）	`String`	`false`	'pi-icon-'

← Search 搜索 CountDown 倒计时 →