Rate 评分

星级评价组件，支持半星选择、自定义文案和只读

评分组件，用于星级评价，支持半星选择和自定义文案

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-rate class="demo-default" />
  <re-rate class="demo-value" :value="3" />

<!-- 最大星级 -->
  <re-rate class="demo-max-5" :max="5" :value="2" />
  <re-rate class="demo-max-10" :max="10" :value="7" />

<!-- 半星 -->
  <re-rate class="demo-half" :allowHalf="true" :value="2.5" />
  <re-rate class="demo-half-off" :allowHalf="false" :value="3" />

<!-- 只读与禁用 -->
  <re-rate class="demo-readonly" :readonly="true" :value="4" />
  <re-rate class="demo-disabled" :disabled="true" :value="2" />

<!-- 辅助文字 -->
  <re-rate class="demo-text" :showText="true" :value="3" texts="差,一般,好,很好,非常好" />
  <re-rate class="demo-text-zero" :showText="true" :value="0" texts="差,一般,好,很好,非常好" />

<!-- 间距与尺寸 -->
  <re-rate class="demo-gap" :gap="10" :value="3" />
  <re-rate class="demo-size" size="28px" :value="2" />

<!-- 自定义颜色 -->
  <re-rate class="demo-color" color="#ff5500" :value="4" />

<!-- 满星状态 -->
  <re-rate class="demo-full" :max="5" :value="5" :showText="true" texts="差,一般,好,很好,非常好" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-rate />。

API

Rate Props

名称类型默认值描述必传
valuenumber0当前评分值N
maxnumber5星星总数N
allowHalfbooleanfalse是否允许半选N
readonlybooleanfalse是否只读N
disabledbooleanfalse是否禁用N
showTextbooleanfalse是否显示评分文案N
textsArray<string>评分文案数组，按索引对应星星数量N
gapnumber4星星之间的间距（px）N
sizestring"20px"星星尺寸，如 "20px"N
colorstring""选中星星的颜色N
customStylestring""自定义样式N

Rate Events

名称参数描述
changevalue: number评分变化时触发
update:modelValuevalue: numberv-model 更新事件

Rate Slots

名称描述
--
Radio 单选框
用于在预设的一组选项中执行单项选择，并呈现选择结果。
Search 搜索框
参考 TDesign search 示例，支持结果预览、字数限制、焦点操作按钮与形状切换。