前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载Rate 评分组件是 vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库中用于等级评估的交互组件适用于用户对产品进行评分、对内容进行打星等场景。本文以组件官方文档packages/devui-vue/docs/components/rate/index.md为主体结合组件源码rate.tsx、rate-types.ts、rate.scss与测试用例rate.spec.ts系统讲解 Rate 组件的只读模式、动态模式、半选模式、自定义外观等全部用法并深入剖析其基于宽度填充实现星形部分高亮的底层原理帮助你既会用、又懂其实现机制。组件概览与使用场景Rate 评分组件用于等级评估最常见的应用场景是用户对一个产品进行评分时可以使用。它支持只读展示例如展示商品已获得的平均分、可交互评分用户点击/悬停选星、半星粒度支持 0.5 分、自定义字符/图标/颜色以及成功/警告/错误三种语义色等多种能力是数据展示类目下见 组件注册入口 中category: 数据展示功能完整status: 100%的组件之一。安装与注册方式Rate 组件在 index.ts 中对外导出既支持全局注册也支持按需引入import type { App } from vue; import Rate from ./src/rate; export * from ./src/rate-types; export { Rate }; export default { title: Rate 评分, category: 数据展示, status: 100%, install(app: App): void { app.component(Rate.name, Rate); }, };组件内部名称为DRate见 rate.tsx 中name: DRate因此模板中统一使用d-rate标签按需引入时直接import { Rate } from vue-devui并在局部components中注册即可类型定义RateProps等由export * from ./src/rate-types一并导出方便 TypeScript 用户做类型提示。基础用法只读与动态两种模式只读模式当只需要展示评分结果、不允许用户交互时设置:readtrue即可。此时鼠标悬停无预览效果、点击无法改变分值光标显示为not-allowed样式定义见 rate.scss 中.#{$devui-prefix}-rate--only-read规则。template d-rate :readtrue v-modelvalueReadonly / /template script import { ref, defineComponent } from vue; export default defineComponent({ setup() { const valueReadonly ref(3.5); return { valueReadonly, }; }, }); /script注意只读模式下v-model可以传入小数如3.5组件会根据小数部分自动渲染整星 半星的填充效果详见下文半选模式与源码实现原理。动态模式默认情况下read为false组件处于动态交互模式用户悬停可预览、点击即可提交评分template d-rate v-modelvalueDynamic iconstar-o / /template script import { ref, defineComponent } from vue; export default defineComponent({ setup() { const valueDynamic ref(2); return { valueDynamic, }; }, }); /script此处通过iconstar-o指定了使用 devUI 图标库中的star-o图标作为评分图标。根据 rate.tsx 的渲染逻辑icon参数最终会传给d-icon组件渲染内部支持字体图标与 SVG 图标两种形态见 use-icon-dom.tsx因此只支持 devUI 图标库中存在的图标名。自定义外观字符、颜色与等级数量动态模式-自定义如果不想使用星星图标可以通过character传入任意字符如字母A并通过color自定义激活色、通过count自定义总等级数template d-rate characterA color#ffa500 v-modelvalueCustom :count6 / /template script import { ref, defineComponent } from vue; export default defineComponent({ setup() { const valueCustom ref(3); return { valueCustom, }; }, }); /script上面的示例把评分图标替换为大写字母A激活颜色设为橙色#ffa500等级总数由默认的 5 级改为 6 级。需要注意icon与character只能设置其中一个。从 rate.tsx 的渲染分支可以确认这一互斥关系icon !character渲染d-icon name{icon}character !icon渲染自定义字符文本!icon !character渲染组件内置的 SVG 五角星默认形态。如果两者同时设置character会被忽略。使用 type 参数type参数用于设置当前评分的语义类型不同类型对应不同的激活颜色。RateStatusType支持success | warning | error三种取值template div d-rate v-modelvalue1 :readtrue typesuccess :count5 iconstar / /div div d-rate v-modelvalue2 :readtrue typewarning :count5 iconstar / /div div d-rate v-modelvalue3 :readtrue typeerror :count5 / /div /template script import { ref, defineComponent } from vue; export default defineComponent({ setup() { const value1 ref(3.5); const value2 ref(2); const value3 ref(3); return { value1, value2, value3, }; }, }); /script三种 type 对应的激活星颜色在 rate.scss 中有明确定义type 取值激活星颜色HEXSCSS 类名success#3dcca6绿色devui-rate__color--successwarning#fac20a黄色devui-rate__color--warningerror#f66f6a红色devui-rate__color--error当不传type时激活星默认使用主题品牌色$devui-brand见.#{$devui-prefix}-rate__color-active规则。另外值得留意的是当同时设置了color参数时颜色优先级高于type——从 rate.tsx 中默认图标分支可以看到!color ? ns.em(color, type) : ns.em(color, customize)即存在color时走自定义类使用 CSS 变量--star-color着色。半选模式与 change 事件通过:allow-halftrue开启半选能力用户点击星形左半侧即可得到 0.5 分的粒度同时配合change监听分值变化template d-rate v-modelvalueHalf :allow-halftrue changechange / /template script import { ref, defineComponent } from vue; export default defineComponent({ setup() { const valueHalf ref(2.5); const change (val) { console.log(val); }; return { valueHalf, change, }; }, }); /script关于change事件的实现细节在 rate-types.ts 中声明了onChange: (value: number) void与onTouched: () void两个 prop在 rate.tsx 的selectValue中点击后依次调用props.onChange(chooseValue.value 1)、props.onTouched()并通过ctx.emit(update:modelValue, chooseValue.value 1)同步 v-model。因此模板中的change监听会收到改变后的分值作为回调参数。注意分值是 1 起始的内部索引index从 0 开始对外值为index 1半选时对应index - 0.5 1。另外在只读模式下也可以传入小数如3.5来展示半星效果initRating会通过halfStar chooseValue.value % 1计算小数部分并渲染对应宽度的半星。API 参考Rate 参数参数名类型默认值描述跳转 Demoreadbooleanfalse可选设置是否为只读模式只读模式无法交互只读模式countnumber5可选设置总等级数只读模式typeRateStatusType--可选设置当前评分的类型不同类型对应不同颜色使用 type 参数colorstring--可选星星颜色动态模式-自定义iconstring--可选评分图标的样式只支持 devUI 图标库中所有图标动态模式characterstring--可选评分图标的样式icon 与 character 只能设置其中一个动态模式-自定义allow-halfbooleanfalse可选动态模式下是否允许半选半选模式从 rate-types.ts 的 props 定义可以补充以下细节modelValuenumber默认0当前分值即 v-model 绑定的值支持小数以表达半星readboolean默认false、countnumber默认5、allowHalfboolean默认false与文档表格一致type、color、icon、character默认均为空字符串未设置时组件展示默认内置五角星 主题品牌色。Rate 事件事件名类型说明回调参数跳转 DemochangeEventEmitternumber分值改变时触发改变后的分值半选模式组件声明了emits: [change, update:modelValue]见 rate.tsx其中change由模板中的change监听Vue3 会将其注入为onChangeprop 并在选择时调用update:modelValue用于支撑v-model双向绑定。Rate 类型定义RateStatusTypetype RateStatusType success | warning | error;源码实现原理宽度填充驱动星形高亮理解了 API 之后再来看看 Rate 组件在源码层面是如何把分值变成半颗星的。数据结构宽度数组在 rate.tsx 中组件维护了一个totalLevelArray数组每个元素记录该颗星激活层的width百分比字符串例如100%表示满星、50%表示半星、0表示未点亮const totalLevelArray ref{ width: string }[]([]); const chooseValue ref(0); const initLevelArray () { totalLevelArray.value []; for (let i 0; i props.count; i) { totalLevelArray.value.push({ width: 0 }); } };initRating则根据modelValue换算各星的宽度整数部分对应的星设为100%小数部分halfStar 0所在的那颗星设为halfStar * 100 %其余为0const initRating () { chooseValue.value props.modelValue; const halfStar chooseValue.value % 1; const intCurrentLevel Math.floor(chooseValue.value); setChange(0, intCurrentLevel, 100%); if (halfStar 0) { totalLevelArray.value[intCurrentLevel][width] halfStar * 100 %; setChange(intCurrentLevel 1, props.count, 0); } else { setChange(intCurrentLevel, props.count, 0); } };组件在onMounted时执行初始化并通过watch([() props.modelValue, () props.count])响应 v-model 与外部分值的变化。双层图标 overflow: hidden部分填充的秘诀每颗星在渲染时由两层图标叠放构成见 rate.tsx 的render与 rate.scss 的样式底层灰色图标使用$devui-shape-icon-fill颜色SCSS 变量灰色用于表达未点亮的完整星形上层激活图标带rate__active-star类通过position: absolute; top: 0; left: 0; overflow: hidden;绝对定位叠在底层之上其宽度由 JS 计算的百分比控制。当宽度为50%时就恰好遮住左半颗星视觉上形成半星。激活层的着色由rate__color-active基类 rate__color--success/warning/error/customize修饰类决定其中customize模式使用 CSS 变量color: var(--star-color)而外层容器通过style{--star-color: color}注入自定义颜色这也是color参数生效的通道。交互三件套mouseover / click / mouseleavehoverToggle(e, index)非只读时鼠标悬停把前index 1颗星点亮再根据鼠标在星内的偏移位置isSemiSelected决定当前星是50%还是100%实现悬停预览半星selectValue(e, index)非只读时点击提交半选则chooseValue index - 0.5整选则chooseValue index随后回调onChange、onTouched并 emitupdate:modelValue对外分值统一1onMouseleave鼠标离开时调用initRating()重置为 v-model 的实际分值。其中半选判定是按点击位置计算的const isSemiSelected (e: MouseEvent) { const target e.target as HTMLElement; return props.allowHalf e.offsetX * 2 target.clientWidth; };即allowHalf开启且点击落在星形左半侧时视为半选——这与官方文档中动态模式下是否允许半选的描述完全吻合。而在只读模式下hoverToggle与selectValue都会因if (props.read) return;直接短路彻底阻断交互。命名规范组件使用useNamespace(rate)生成 BEM 风格类名见 use-namespace.ts最终类名为devui-rate块、devui-rate__color元素、devui-rate--pointer/devui-rate--only-read修饰符SCSS 中通过$devui-prefix变量统一前缀与组件库整体风格保持一致。测试用例验证rate.spec.ts 对上述行为提供了完整的自动化验证是理解组件行为的最佳佐证基础渲染挂载d-rate后断言根容器devui-rate存在、devui-rate__color存在设置colorred后断言出现devui-rate__color--customize修饰类验证了自定义颜色分支动态交互对第 4 颗星触发mouseover后激活层style变为width: 100%悬停预览触发mouseleave后回到width: 0px重置依次点击第 1、3 颗星后绑定的value从 0 变为 1、3验证了点击评分与 v-model 同步只读模式在:readtrue下对第 1、3、4 颗星依次触发click分值始终保持在初始的 3验证了只读模式完全不可交互。总结vue-devui 的 Rate 评分组件以极简的 API 覆盖了评分场景的全部诉求只读模式read用于结果展示支持小数分值呈现半星动态模式支持鼠标悬停预览与点击评分配合allow-half可提供 0.5 分粒度自定义能力覆盖图标icondevUI 图标库、字符character与icon互斥、颜色color与等级数量count语义色通过typesuccess/warning/error一键切换底层以宽度百分比 双层星形叠加 overflow hidden实现任意比例的部分填充交互与展示逻辑在 rate.tsx 中清晰可读并配套了完整的测试保障。掌握了这些参数与原理你就可以在真实产品中根据业务需要灵活组合例如只读半星展示平均分 动态可评五星构建出符合 DevUI Design 规范且交互自然的评分体验。赞分享前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载相关推荐wot-design-uni Rate 评分组件完全指南从基本用法到半选、清空与触摸滑动的源码级解析wot design uni Rate 评分组件完全指南从基本用法到半选、清空与触摸滑动的源码级解析 wot design uni 的 wd rate 评分组前端UI组件移动开发小程序Ant Design Rate 评分组件完全指南API、半星、自定义字符与 Design Token 实战Ant Design Rate 评分组件完全指南API、半星、自定义字符与 Design Token 实战 Rate评分是 Ant Design 数据录入前端UI组件设计系统rsuite Rate 评分组件禁用与只读disabled / readOnly / plaintext状态完整指南rsuite Rate 评分组件禁用与只读disabled / readOnly / plaintext状态完整指南 Rate 评分组件用于表达用户对内容的前端UI组件上一篇使用 .NET OpenTelemetry SDK 为 ASP.NET Core 配置分布式追踪、指标与日志从 OTLP 导出到自定义 Span 与上下文传播下一篇uncloud 的 uc exec 命令详解在运行中的服务容器内执行命令创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考