Rate 评分

介绍

用于对事物进行评分操作，支持半星、自定义图标、颜色及只读模式。

引入

import { TnRate } from "@tuniao/tn-ui";

代码演示

基础用法

通过 modelValue 属性绑定当前评分值，默认最大值为 5。

点我查看代码

@Local rateValue: number = 3;

TnRate({
  modelValue: this.rateValue,
  onChange: (value: number) => {
    this.rateValue = value;
  },
})

半星

通过 allowHalf 属性开启半星选择。

点我查看代码

@Local rateValue: number = 2.5;

TnRate({
  modelValue: this.rateValue,
  allowHalf: true,
  onChange: (value: number) => {
    this.rateValue = value;
  },
})

自定义图标

通过 activeIcon 和 inactiveIcon 属性自定义评分图标。

点我查看代码

@Local rateValue: number = 3;

TnRate({
  modelValue: this.rateValue,
  activeIcon: "heart-fill",
  inactiveIcon: "heart",
  onChange: (value: number) => {
    this.rateValue = value;
  },
})

自定义颜色

通过 activeColor 和 inactiveColor 属性自定义评分颜色。

点我查看代码

@Local rateValue: number = 3;

TnRate({
  modelValue: this.rateValue,
  activeColor: "danger",
  inactiveColor: "#E0E0E0",
  onChange: (value: number) => {
    this.rateValue = value;
  },
})
TnRate({
  modelValue: this.rateValue,
  activeColor: "success",
  onChange: (value: number) => {
    this.rateValue = value;
  },
})
TnRate({
  modelValue: this.rateValue,
  activeColor: "#ff6700",
  onChange: (value: number) => {
    this.rateValue = value;
  },
})

只读

通过 readonly 属性设置为只读模式，仅展示评分，不可操作。

点我查看代码

TnRate({
  modelValue: 4,
  readonly: true,
})

自定义尺寸

通过 rateSize 属性自定义评分图标大小，通过 gutter 属性自定义图标间距。

点我查看代码

Column({ space: 10 }) {
  // 小尺寸
  TnRate({
    modelValue: 3,
    rateSize: 16,
    gutter: 4,
  })
  // 默认尺寸
  TnRate({
    modelValue: 3,
  })
  // 大尺寸
  TnRate({
    modelValue: 3,
    rateSize: 36,
    gutter: 12,
  })
}

API

Props

参数	说明	类型	默认值
modelValue	当前评分值	number	-
max	最大评分值	number	5
min	最小评分值	number	0
allowHalf	是否允许半星	boolean	false
readonly	是否为只读模式	boolean	false
rateSize	评分图标大小	number	-
gutter	图标间距	number	-
activeIcon	选中时的图标	string	-
inactiveIcon	未选中时的图标	string	-
activeColor	选中时的颜色	string	-
inactiveColor	未选中时的颜色	string	-

Events

事件名	说明	回调参数
onChange	评分变化时触发	(value: number) => void