Files
lingxiao865 c5af079d8c first commit
2026-02-10 08:05:03 +08:00

2.9 KiB
Raw Permalink Blame History

title, description, spline, isComponent
title description spline isComponent
Rate 评分 用于对某行为/事物进行打分。 form true

引入

可在 main.ts 或在需要使用的页面或组件中引入。

import TRate from '@tdesign/uniapp/rate/rate.vue';

组件类型

实心评分

{{ base }}

自定义评分

{{ custom }}

自定义评分数量

{{ count }}

带描述评分

{{ show-text }}

组件状态

{{ action }}

组件样式

评分大小

{{ size }}

设置评分颜色

{{ color }}

特殊样式

竖向带描述评分

{{ special }}

自定义图片前缀

{{iconPrefix}}

API

Rate Props

名称 类型 默认值 描述 必传
custom-style Object - 自定义样式 N
allow-half Boolean false 是否允许半选 N
color String / Array '#ED7B2F' 评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色示例[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB']。TS 类型:string | Array<string> N
count Number 5 评分的数量 N
disabled Boolean undefined 是否禁用评分 N
gap String / Number 8 评分图标的间距 N
icon String / Array - 自定义评分图标,[选中图标,未选中图标]。TS 类型:string | string[] N
icon-prefix String undefined 定义图标前缀 N
placement String top 选择评分弹框的位置值为空字符表示不显示评分弹框。可选项top / bottom / '' N
show-text Boolean false 是否显示对应的辅助文字 N
size String / Number '24px' 评分图标的大小 N
texts Array [] 评分等级对应的辅助文字。组件内置默认值为:['极差', '失望', '一般', '满意', '惊喜']。自定义值示例:['1分', '2分', '3分', '4分', '5分']。TS 类型:Array<string> N
value Number 0 选择评分的值。支持语法糖 v-model:value N
default-value Number 0 选择评分的值。非受控属性 N
variant String outline 已废弃。形状类型有描边类型和填充类型两种。可选项outline/filled N

Rate Events

名称 参数 描述
change (context: { value: number }) 评分数改变时触发

Rate External Classes

类名 描述
t-class 根节点样式类
t-class-icon 图标样式类
t-class-text 文本样式类

CSS Variables

组件提供了下列 CSS 变量,可用于自定义样式。

名称 默认值 描述
--td-rate-icon-scale 1.33 -
--td-rate-selected-color @warning-color -
--td-rate-text-active-color @text-color-primary -
--td-rate-text-active-font-weight 600 -
--td-rate-text-color @text-color-disabled -
--td-rate-text-font-size @font-size-m -
--td-rate-unselected-color @component-border -