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 事件。

注：触发change事件时需将事件返回的值同步给current属性

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

// data 数据 及 方法
export default {
  data() {
  	return {
  		current:0
  	}
  },
  methods: {
  	change: function(e) {
  		this.current = e.index
  	}
  }
}

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

// data 数据 及 方法
Page({
  data: {
    current:0
  },
  change: function(e) {
      this.setData({
        current: e.detail.index
      })
   }
})

// Make sure to add code blocks to your code group

设置星星数

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

注：触发change事件时需将事件返回的值同步给current属性

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

// data 数据 及 方法
export default {
 data() {
 	return {
 		current:0
 	}
 },
 methods: {
 	change: function(e) {
 		this.current = e.index
 	}
 }
}

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

// data 数据 及 方法
Page({
  data: {
    current:0
  },
  change: function(e) {
      this.setData({
        current: e.detail.index
      })
   }
})

// Make sure to add code blocks to your code group

设置星星样式

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

注：触发change事件时需将事件返回的值同步给current属性

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

// data 数据 及 方法
export default {
 data() {
 	return {
 		current:0
 	}
 },
 methods: {
 	change: function(e) {
 		this.current = e.index
 	}
 }
}

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

// data 数据 及 方法
Page({
  data: {
    current:0
  },
  change: function(e) {
      this.setData({
        current: e.detail.index
      })
   }
})

// Make sure to add code blocks to your code group

禁用状态

通过 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

插槽名称	插槽说明
-	-

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	选中颜色	#EB0909
hollow	Boolean	未选中是否为空心	false
params V1.6.1	[Number, String]	自定义参数，触发事件时回传	0

Events

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

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

预览

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

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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