表单组件
评分 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>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
modelValue | number | 0 | 当前分值,等同v-model |
count | number | 5 | 最大评分数量 |
color | string | "" | 选中的颜色,默认空值取全局值 |
unColor | string | "#cacaca" | 未选中的颜色 |
darkUnColor | string | "#8b8b8b" | 未选中的暗黑背景颜色空时取InputDark表单颜色 |
size | string | "42" | 尺寸 |
space | string|number | "8" | 间隙 |
icon | string | "star-fill" | 选中的图标 |
unicon | string | "star-line" | 未选中的图标 |
readonly | boolean | false | 是否只读状态 |
disabled | boolean | false | 是否禁用状态 |
showScore | boolean | false | 是否显示右侧评分值 |
fontSize | string | "28" | 右侧文本分值文本的字号 |
half | boolean | false | 是否开启半星开启半星后,自定的unicon和icon失效。 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
change | - | - | - |
update:modelValue | - | - | - |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|---|---|
score | 名称:binding,score 类型:number | |
文本分值的右侧插槽 |
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|