Skip to content
On this page

组件库文档 tmui.design

评分 Rate

Rate 评分是常见的评分组件,多用于售后等评价情景,本组件提供灵活的使用方法


🌶️ 评分 Rate 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<tm-rate :defaultValue="2"></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="只读"></tm-text>
			<tm-divider></tm-divider>
			<tm-rate color="green" readonly :defaultValue="4" showLabel></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="根据星数不同颜色不一样"></tm-text>
			<tm-divider></tm-divider>
			<tm-rate :color="['red', 'orange', 'primary', 'pink', 'green']" showLabel></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="更换不同的图标"></tm-text>
			<tm-divider></tm-divider>
			<tm-rate :defaultValue="1" icon="tmicon-smile-fill" :color="['red', 'orange', 'primary', 'pink', 'green']" showLabel></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="禁用"></tm-text>
			<tm-divider></tm-divider>
			<tm-rate :defaultValue="1" disabled></tm-rate>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmRate from '@/tmui/components/tm-rate/tm-rate.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
function beforeEnter() {
	return new Promise((res) => {
		setTimeout(function () {
			res(true)
		}, 1000)
	})
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
countNumber5评分图标数量
modelvalue / v-modeelNumber0双向绑定的评分数值
defaultValueNumber0默认评分值
readonlyBooleanfalse是否只读,样式无变化,可以触发点击事件,但同样无法切换数值
disabledBooleanfalse禁用后无法点击和切换值
iconStringtmicon-collection-fill评分图标
sizeNumber42评分图标大小
colorString / Arrayorange可以是数据也可以是单独主题名称。如果出现多个主题名称时。颜色将会对应count出现。比如1星是红,2星是蓝。依此类推
gutterNumber16图标间距
darkBooleanfalse是否为黑暗模式
followDarkBooleantrue是否跟随全局切换黑暗模式
labelString""右边的分值,默认为空即显示星数值。如果提供了其它值,就不显示默认的,比如9.6分
showLabelBooleanfalse是否显示右侧分数值

🌹 事件

事件名参数返回数据描述
click/index返回当前被点击评分的索引值(从0开始)
change/modelvalue返回当前评分数值

🌽 slot插槽

默认default

🥗 ref方法

😡 贡献者

Wicos