Rate 评分器

该组件一般用于表单中，手动选择一个区间范围的场景。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

• 通过count参数设置总共有多少颗星星可选择。
• 通过v-model双向绑定初始化时默认选中的星星数量。

<template>
  <tn-rate v-model="value" :count="count"></tn-rate>
</template>

<script>
  export default {
    data() {
      return {
        count: 4,
        value: 2
      }
    }
  }
</script>

设置最小选中数

设置minCount可以设置最小选择星星的数量。

<tn-rate v-model="value" :minCount="1"></tn-rate>

设置禁用状态

设置disbaled参数可以设置禁用状态，在禁用下无法滑动和点击。

<tn-rate v-model="value" :disabled="true"></tn-rate>

设置半星状态

设置allowHalf参数可以允许选择半星。

<tn-rate v-model="3.5" :allowHalf="true"></tn-rate>

自定义样式

• 通过activeColor设置选中的星星的颜色
• 通过inactiveColor设置未选中时星星的颜色
• 通过gutter设置星星的间距，左右内边距各占gutter的一半

<tn-rate v-model="value" activeColor="#31E749" inactiveColor="#E7D5FA"></tn-rate>

自定义星星的图标

• 通过activeIcon设置激活的图标
• 通过inactiveIcon设置未激活的图标

图标只允许使用TuniaoUI内置的图标。

<tn-rate v-model="value" :activeIcon="emoji-good-fill" :inactiveIcon="emoji-good"></tn-rate>

评分分级分层

• 通过colors设置不同颜色区分评分层级
• 通过icons设置不同类型图标区分评分层级

icons参数传递了3个图标，当选中2个时，用第一个图标，4个时，用第二个图标，5个时，用第三个图标作为激活的图标。如此类推。

<template>
  <view>
    <tn-rate v-model="value" :colors="colors" :icons="icons"></tn-rate>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: 2,
        colors: ['#01BEFF','#3D7EFF','#31C9E8'],
        icons: ['star-fill','praise-fill','flower-fill']
      }
    }
  }
</script>

API

Props

属性名	说明	类型	默认值	可选值
v-model	用于双向绑定当前选中的数量	Number	0	-
count	显示的星星数量	Number	5	-
minCount	允许选择的最小星星数	Number	0	-
disabled	禁止选择滑动操作	Boolean	false	true
allowHalf	允许选择半个星星	Boolean	false	true
size	星星大小，单位rpx	Number	32	-
activeColor	被选中的颜色	String	#01BEFF	-
inactiveColor	未被选中的颜色	String	#AAAAAA	-
activeIcon	被选中的图标，只可使用TuniaoUI内置的图标	String	star-fill	-
inactiveIcon	未被选中的图标，只可使用TuniaoUI内置的图标	String	star	-
gutter	星星之间的距离，单位rpx	Number	10	-
colors	分层选择时的自定义颜色	Array	-	-
icons	分层选择时的自定义图标	Array	-	-

Slots

none

Event

事件名称	说明	回调参数
change	选中星星数量发生变化时触发	当前选中的星星数量