xiaoye-components

Appearance

Rate 评分 ​

xy-rate 适合评价、满意度回访、服务打分和后台运营面板里的人工审核场景。它延续了当前仓库"中文文案优先、示例先行"的文档结构，同时补上了半星、清空、键盘和表单校验这些常见评分链路。

何时使用 ​

  • 需要用户对服务、商品或内容进行星级评价时。
  • 需要满意度回访或 NPS 打分时，配合 show-text 展示评价文案。
  • 需要更细颗粒度的评分时，开启 allow-half 支持半星。
  • 需要在表单中收集评分并参与校验时，放在 xy-form-item 内即可。
  • 需要只读展示已有评分时，使用 disabled 配合 show-score。

何时不使用 ​

  • 需要连续数值滑块输入时，优先使用 xy-slider。
  • 需要多维度评分（如分别评价"服务""环境""价格"）时，应使用多个 Rate 实例而非单个 Rate 扩展。
  • 需要文字评价或长文本反馈时，应使用 xy-input 的 type="textarea"。
  • 需要点赞/踩的二选一交互时，应使用自定义按钮组而非 Rate。

基础用法 ​

最常见的用法是和 v-model 绑定一个数值，点击星标后立刻回写评分结果。

基础用法星级评分

评分组件用于收集用户满意度或服务质量评价。

当前评分：3

半星与清空 ​

allow-half 适合更细颗粒度的主观评价；clearable 适合“允许撤销打分”的后台操作流。

支持半星与再次点击清空：3.5

文案与分数展示 ​

show-text 用来承接中文评价文案，show-score 更适合看板、详情页和统计面板。

满意
口碑文案联动
综合得分 3.5
适合看板里的平均分展示

自定义图标、颜色与只读态 ​

通过 colors、icons、void-icon 和 disabled-void-color，可以把评分视觉切到更贴近业务的语义里。

满意度 4
只读均分 3.5

表单场景 ​

放在 xy-form-item 里时，xy-rate 会参与 change / blur 校验链路，并自动复用表单生成的字段 id。

0 分

键盘与交互约定 ​

  • 聚焦组件后，ArrowUp / ArrowRight 会增加评分，ArrowDown / ArrowLeft 会降低评分。
  • 开启 allow-half 后，鼠标移动到图标左半区会预览半星，点击后按 0.5 步进提交。
  • 开启 clearable 后，再次点击当前值会回退到 0。
  • 组件禁用时，鼠标和键盘交互都会被短路，但仍会按当前值展示小数填充。

API ​

Rate Attributes ​

属性说明类型默认值
model-value当前评分number | null0
id根节点 idstringundefined
low-threshold低分阈值number2
high-threshold高分阈值number4
max最大评分项数量number5
colors激活颜色数组或阈值映射RateColorMap['#94a3b8', '#f59e0b', '#f97316']
void-color未激活图标颜色string''
disabled-void-color禁用态未激活图标颜色string''
icons激活图标数组或阈值映射RateIconMap['mdi:star', 'mdi:star', 'mdi:star']
void-icon未激活图标string'mdi:star-outline'
disabled-void-icon禁用态未激活图标string'mdi:star-outline'
disabled是否禁用booleanfalse
allow-half是否允许半星booleanfalse
show-text是否显示文本评价booleanfalse
show-score是否显示分数booleanfalse
text-color评价文本颜色string''
texts评价文本数组string[]['极差', '失望', '一般', '满意', '惊喜']
score-template分数模板，支持 {value} 占位string'{value}'
size组件尺寸RateProps["size"]跟随全局配置
clearable是否允许再次点击清空booleanfalse
aria-label原生 aria-labelstring'评分'
validate-event是否触发表单校验booleantrue

Rate Events ​

事件说明参数
update:model-value当前评分变化时触发RateValueChangeHandler
change提交新评分时触发RateValueChangeHandler
focus组件获得焦点时触发RateFocusHandler
blur组件失去焦点时触发RateFocusHandler

Rate Exposes ​

暴露项说明类型
root根节点引用RateInstance["root"]
focus聚焦评分组件RateInstance["focus"]
blur让评分组件失焦RateInstance["blur"]
setCurrentValue手动设置当前预览评分RateInstance["setCurrentValue"]
resetCurrentValue恢复到 model-valueRateInstance["resetCurrentValue"]