Rate 评分

概述

Rate 评分，对评价进行展示或对事物进行快速的评级操作。

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

温馨提示

组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiRate from "@/components/firstui/fui-rate/fui-rate.vue"
export default {
	components:{
		fuiRate
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 @change 得到评分数据。

<fui-rate @change="change"></fui-rate>

methods: {
	change(e){
		//返回评分 e.score
		console.log(e)
	}
}

1
2
3
4
5
6

设置颜色

通过 color 属性设置未选中时颜色，activeColor 属性设置选中时颜色。

<fui-rate color="#888" activeColor="#465CFF" @change="change"></fui-rate>

methods: {
	change(e){
		//返回评分 e.score
		console.log(e)
	}
}

1
2
3
4
5
6

设置大小

通过 size 属性设置星星大小。

<fui-rate :size="48" @change="change"></fui-rate>

methods: {
	change(e){
		//返回评分 e.score
		console.log(e)
	}
}

1
2
3
4
5
6

支持半星

通过 allowHalf 属性设置是否支持半星评级或展示。

<fui-rate allowHalf @change="change"></fui-rate>

methods: {
	change(e){
		//返回评分 e.score
		console.log(e)
	}
}

1
2
3
4
5
6

插槽名称	说明
-	-

属性名	类型	说明	默认值	平台差异说明
max	Number, String	最大评分/星星数量	5	-
score	Number, String	当前评分，小数仅支持0.5	0	-
color	String	星星未选中的颜色	#CCCCCC	-
activeColor	String	星星选中状态颜色	#FFB703	-
disabled	Boolean	是否禁用点击	false	-
size	Number, String	星星大小，单位rpx	56	-
spacing	Number, String	星星间距，单位rpx	0	-
allowHalf	Boolean	是否支持半星选择或展示	false	-
halfRate	Number, String	超过多少比例选中半星（取值区间0~0.5）	0.2	-
touchable	Boolean	是否支持滑动手势	true	-
param	Number, String	自定义参数，@change事件回传	0	-

事件名	说明	回调参数
@change	评分改变时触发	{ score:评分 param:自定义参数 }

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数
setParentWidth V1.9.8+	当组件嵌套在类似Drawer（抽屉）组件或元素中时，需要调用该方法传入Drawer（抽屉）组件或元素宽度。注：当Drawer（抽屉）组件非FirstUI组件时才需要调用。	(width) (抽屉等外层容器宽度)
reset V2.0.0+	当组件位置初始化获取异常时可调用此方法重置组件	-

VIP内容代码请查看订单页下载的组件库示例源码。

该组件为付费组件，UNI-APP版VIP用户可免费使用。