# tui-grade 评分

介绍

可设置大小颜色,支持选择半星,支持手势touch选择。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiGrade from "@/components/thorui/tui-grade/tui-grade"
export default {
	components:{
		tuiGrade
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-grade": "/components/thorui/tui-grade/tui-grade"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础用法

通过 score 属性设置当前评分(小数只支持半星0.5),评分改变时触发 change 事件。

<!--uni-app-->
<tui-grade :score="score" @change="change"></tui-grade>

<!--微信小程序-->
<tui-grade score="{{score}}" bindchange="change"></tui-grade>
/*methods*/

//uni-app
change: function(e) {
	this.score = e.score;
}

//微信小程序
change: function(e) {
    this.setData({
	 score:e.detail.score
   })
 }
设置星星数

通过 quantity 属性设置星星数量,默认值为5。

<!--uni-app-->
<tui-grade :score="score" :quantity="8" @change="change"></tui-grade>

<!--微信小程序-->
<tui-grade score="{{score}}" quantity="{{8}}" bindchange="change"></tui-grade>
设置星星样式

通过 size 属性设置星星大小,normal 属性设置未选中颜色,active 属性设置选中颜色。

<!--uni-app-->
<tui-grade :score="score" :size="16" normal="#ccc" active="#ff7900" @change="change"></tui-grade>

<!--微信小程序-->
<tui-grade score="{{score}}" size="{{16}}" normal="#ccc" active="#ff7900" bindchange="change"></tui-grade>
禁用状态

通过 disabled 属性设置禁用状态,不可选择。

<!--uni-app-->
<tui-grade :score="score" disabled></tui-grade>

<!--微信小程序-->
<tui-grade score="{{score}}" disabled></tui-grade>
设置星星间距

通过 width 属性设置星星间距,设置的值需要大于等于 size 属性值。

<!--uni-app-->
<tui-grade :score="score" @change="change" :width="24"></tui-grade>

<!--微信小程序-->
<tui-grade score="{{score}}" bindchange="change" width="{{24}}"></tui-grade>

# Slots

none

# Props

参数 类型 说明 默认值
quantity Number 星星数量 5
score [Number, String] 当前评分,小数只支持半星0.5 0
disabled Boolean 是否禁用点击 false
size Number 星星大小,单位px 20
width Number 星星宽度,大于等于size属性值,设置间距使用,单位px 20
normal String 未选中颜色 #b2b2b2
active String 选中颜色 #e41f19
isHalf Boolean 是否支持半星选择/展示 true
halfRate Number 超过多少比例选中半星(取值区间0~0.5) 0.25
params [Number, String] 自定义参数,触发事件时回传 0

# Events

事件名 说明 回调参数
change 评分改变时触发 {
  score:Number, //当前评分
  params: params //自定义参数
}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码