Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

评分 TmRate

评分组件,只读和禁用等属性

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
	<view>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">评分 tmRate</tm-text>
			<tm-text color="#999999">
				评分组件,只读和禁用等属性
			</tm-text>
		</tm-sheet>
		<tm-sheet>
			<tm-rate></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">半星</tm-text>
			<tm-rate :half="true" :model-value="2.5" ></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">只读</tm-text>
			<tm-rate color="warn"  :half="true" :model-value="4.5" :readonly="true"></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">禁用</tm-text>
			<tm-rate color="success" :model-value="3" :disabled="true"></tm-rate>
		</tm-sheet>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">显示分数</tm-text>
			<tm-rate color="error" :model-value="3" :show-score="true"></tm-rate>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue"
</script>

<style></style>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
modelValuenumber0当前分值,等同v-model
countnumber5最大评分数量
colorstring""选中的颜色,默认空值取全局值
unColorstring"#cacaca"未选中的颜色
darkUnColorstring"#8b8b8b"未选中的暗黑背景颜色空时取InputDark表单颜色
sizestring"42"尺寸
spacestring|number"8"间隙
iconstring"star-fill"选中的图标
uniconstring"star-line"未选中的图标
readonlybooleanfalse是否只读状态
disabledbooleanfalse是否禁用状态
showScorebooleanfalse是否显示右侧评分值
fontSizestring"28"右侧文本分值文本的字号
halfbooleanfalse是否开启半星开启半星后,自定的unicon和icon失效。

🌹 事件

事件名参数返回数据描述
change---
update:modelValue---

🌽 slot插槽

插槽名数据描述
score名称:binding,score 类型:number
文本分值的右侧插槽

🥗 ref方法

方法名参数返回值描述