ThorUI文档

# tui-rate 评分

介绍

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

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiRate from "@/components/thorui/tui-rate/tui-rate.vue"
export default {
	components:{
		tuiRate
	}
}

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

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

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

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

# 代码演示

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

基础用法

通过 current 属性设置当前选中至哪颗星，评分改变时触发 change 事件。

<!--uni-app-->
<tui-rate :current="current" @change="change"></tui-rate>

<!--微信小程序-->
<tui-rate current="{{current}}" bindchange="change"></tui-rate>

/*methods*/

//uni-app
change: function(e) {
	this.current = e.index
}

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

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

<!--uni-app-->
<tui-rate :current="current" :quantity="8" @change="change"></tui-rate>

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

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

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

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

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

<!--uni-app-->
<tui-rate :current="current" disabled></tui-rate>

<!--微信小程序-->
<tui-rate current="{{current}}" disabled></tui-rate>
设置小数星

通过 score 属性设置当前选中星星分数(大于0，小于等于1的数)，目前小数星只可用于展示。

<!--3.5星-->
<!--uni-app-->
<tui-rate :current="4" :score="0.5" disabled></tui-rate>

<!--微信小程序-->
<tui-rate current="{{4}}" score="{{0.5}}" disabled></tui-rate>

<!--3.6星-->
<!--uni-app-->
<tui-rate :current="4" :score="0.6" disabled></tui-rate>

<!--微信小程序-->
<tui-rate current="{{4}}" score="{{0.6}}" disabled></tui-rate>

# Slots

none

# Props

参数 类型 说明 默认值
quantity Number 数量 5
current Number 当前选中星星 0
score [Number, String] 当前选中星星分数(大于0，小于等于1的数) 1
disabled Boolean 是否禁用点击 false
size Number 星星大小，单位px 20
normal String 未选中颜色 #b2b2b2
active String 选中颜色 #e41f19
hollow Boolean 未选中是否为空心 false
params V1.6.1 [Number, String] 自定义参数，触发事件时回传 0

# Events

注意：uniapp端使用@change，微信小程序端使用bindchange绑定事件。

事件名 说明 回调参数
change 评分改变时触发 {
  index:Number, //当前选中至第几颗星
  params: params //自定义参数
}

# 预览

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

# 线上程序扫码预览

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

← tui-modal 弹框 →