前端UI组件设计系统【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载本文基于 element-react 官方文档 site/docs/en-US/rate.md 展开系统讲解 Rate 评分组件的四种典型用法默认评分、分档配色、半星选择、辅助文字与只读展示及其全部属性与事件。读完本文后你将掌握 Rate 的完整参数配置方式并理解其内部通过clientX坐标判定半星、通过双阈值映射颜色档位、以 0 基索引驱动onChange回调的实现原理能够独立定制和调试该组件。快速上手与基本用法Rate 是 element-react 中用于评分的组件默认由max默认 5颗星组成。组件从包入口以具名方式导出见 src/index.js 中export { default as Rate } from ./rate具体实现在 src/rate/Rate.jsx由 src/rate/index.js 转出文档站中的演示页 site/pages/rate/index.jsx 通过 Markdown 基类按语言加载对应文档渲染示例。官方文档中的基本示例展示了两种形态默认样式以及用colors属性为三个分数档位分别指定颜色。同时通过lowThreshold与highThreshold定义档位边界render() { return ( div classNameintro-block div classNameblock span classNamedemonstrationDefault/span span classNamewrapper Rate change{(val) alert(val)} / /span /div div classNameblock span classNamedemonstrationColor for different levels/span span classNamewrapper Rate colors{[#99A9BF, #F7BA2A, #FF9900]} / /span /div /div ) }需要注意 React 版本的受控写法值由value属性传入变化通过onChange回调获取TS 类型定义为onChange?(value?: number): void见 typings/index.d.ts。上面示例中的change属性是文档示例的历史写法实际项目中应统一使用onChange。颜色分档与阈值lowThreshold / highThreshold 如何生效Rate 将评分划分为低、中、高三档colors默认[#F7BA2A, #F7BA2A, #FF9900.replace(#FF9900,#F7BA2A)]即三个相同的#F7BA2A与iconClasses各需 3 个元素分别对应三个档位。从源码看构造函数会把这两个数组解构成colorMap和classMapRate.jsx L43-L67档位判定集中在getValueFromMap方法中Rate.jsx L111-L123getValueFromMap(value, map) { const { lowThreshold, highThreshold } this.props; let result ; if (value lowThreshold - 1) { result map.lowColor || map.lowClass; } else if (value highThreshold - 1) { result map.highColor || map.highClass; } else { result map.mediumColor || map.mediumClass; } return result; }这里传入的value是星星的 0 基下标第 1 颗星的k 0。以默认lowThreshold 2、highThreshold 4为例k 1即第 1、2 颗星判为低档k 3即第 4、5 颗星判为高档其余为中档——这正好对应文档中“阈值本身计入低档/高档”的语义lowThreshold值本身属于低分档highThreshold值本身属于高分档。该方法被activeColor()、activeClass()复用既支撑纯色图标也支撑通过iconClasses使用三套不同的图标类名。未选中状态的图标颜色由voidColor默认#C6D1DE控制只读状态下未选中图标改用disabledVoidColor默认#EFF2F7见getIconStyle方法Rate.jsx L125-L134。allowHalf 半星交互基于鼠标坐标的左半星判定添加allowHalf属性后允许用户选择半星。其实现核心在setCurrentValue中Rate.jsx L81-L109if (allowHalf) { e.persist() let target e.target; if (this.hasClass(target, el-rate__item)) { target target.querySelector(.el-rate__icon); } if (this.hasClass(target, el-rate__decimal)) { target target.parentNode; } this.setState({ pointerAtLeftHalf: (e.clientX - target.getBoundingClientRect().left) * 2 target.clientWidth, currentValue: ((e.clientX - target.getBoundingClientRect().left) * 2 target.clientWidth) ? value - 0.5 : value }) } else { this.setState({ currentValue: value }); }可以看到组件在onMouseMove时计算鼠标相对于图标左边缘的偏移偏移量的一半若小于等于图标宽度的一半即(clientX - left) * 2 clientWidth则判定指针落在左半区当前值为星星序号 - 0.5。渲染时showDecimalIcon与decimalStyle配合呈现半星效果Rate.jsx L136-L148、L214-L227命中半星的那颗星内部再渲染一个el-rate__decimal内嵌i宽度为50%颜色取当前激活档位的颜色。官方文档中的半星示例render() { return Rate allowHalf{true} onChange{(val) console.log(val)} / }鼠标离开时resetCurrentValue会把临时高亮回退到已确认的值并在allowHalf下根据value是否为整数重新计算pointerAtLeftHalfRate.jsx L241-L256保证离开后星星状态与真实分值一致。辅助文字showText / texts / textTemplate使用showText可在星星右侧显示文字评分。texts是一个长度应与max相等的数组为每个分数档指定文案。文档示例render() { return ( Rate showText{true} texts{[oops, disappointed, normal, good, great]} / ) }默认文字为中文数组[极差, 失望, 一般, 满意, 惊喜]Rate.jsx L321-L338。文字颜色可用textColor定制默认#1F2D3D。从源码的showText()方法看Rate.jsx L229-L239文字取值分两种模式可编辑态取texts[Math.ceil(currentValue)]即用当前含悬停高亮值向上取整后作为数组下标因此评分 4 分显示texts[4]great半星 3.5 也会取到第 4 个文案只读态走textTemplate模板替换模板必须包含{value}占位符正则/\{\s*value\s*\}/允许占位符内含空格{value}会被替换为实际分值。只读展示disabled 状态下的半星渲染只读 Rate 用于纯展示评分支持半星甚至更精细的小数分值。文档示例render() { return Rate disabled{true} value{3.9} showText{true} / }以value{3.9}为例其渲染逻辑值得细看小数判定valueDecimal()用value * 100 - Math.floor(value) * 100提取小数部分得到90半星宽度decimalStyle()中当disabled为真时width valueDecimal 50 ? 0 : 50百分比即小数部分 ≥ 0.5 的星星填充一半3.9 意味着第 4 颗星填充 50%第 5 颗星不填充命中判定showDecimalIcon中showWhenDisabled条件要求item - 1 value - 1 item value - 1即只有落在小数区间的“第 4 颗星”0 基下标 3才渲染半星颜色只读态下已选星星仍按档位着色未选星星使用disabledVoidColor#EFF2F7。仓库中的测试用例 src/rate/test/rate_test.jsx 恰好验证了以上行为disabled value{3.9}时右侧文字为3.9且模拟点击第 5 颗星后颜色保持#EFF2F7不变说明只读态下交互完全被setCurrentValue/selectValue中的disabled短路拦截。属性与事件完整参考以下属性表完整继承自 site/docs/en-US/rate.md默认值一栏与 Rate.jsx 中Rate.defaultProps的源码定义一致AttributeDescriptionTypeAccepted ValuesDefaultmax最高评分number—5disabled是否只读boolean—falseallowHalf是否允许半星选择boolean—falselowThreshold低档与中档的界限值值本身计入低档number—2highThreshold中档与高档的界限值值本身计入高档number—4colors各档位图标颜色数组需 3 个元素array—[#F7BA2A, #F7BA2A, #F7BA2A]voidColor未选中图标颜色string—#C6D1DEdisabledVoidColor只读态未选中图标颜色string—#EFF2F7iconClasses各档位图标类名数组需 3 个元素array—[el-icon-star-on, el-icon-star-on,el-icon-star-on]voidIconClass未选中图标类名string—el-icon-star-offdisabledVoidIconClass只读态未选中图标类名string—el-icon-star-onshowText是否显示辅助文字boolean—falsetextColor辅助文字颜色string—#1F2D3Dtexts辅助文字数组长度应等于 maxarray—[极差, 失望, 一般, 满意, 惊喜]textTemplate只读态文字模板必须包含 {value}string—{value}事件表同样来自文档Event NameDescriptionParametersonChange评分值变化时触发变化后的值补充两点源码层面的事实value也是受支持的受控属性Rate.propTypes中包含value: PropTypes.number默认 0外部value变化会通过componentWillReceiveProps同步到内部状态Rate.jsx L69-L75所有属性在 typings/index.d.ts 中都有对应的RateProps类型声明TypeScript 项目可直接获得补全与校验。内部索引与 onChange 偏移量的对应关系Rate 内部采用 0 基索引驱动渲染与交互理解这一点对排查“值差 1”问题很有帮助render中用[...Array(max)].map((v, k) ...)生成星星每颗星的点击处理为selectValue(k)Rate.jsx L258-L298selectValue中整星分支调用onChange(value 1)半星分支调用onChange(currentValue 1)Rate.jsx L191-L212。也就是说0 基下标k 3第 4 颗星对外发出的是4半星currentValue 2.5第 4 颗星的左半对外发出的是3.5初始状态currentValue: this.props.value - 1Rate.jsx L37-L42也是同一约定外部传入 1 基分值内部转为 0 基索引。测试用例 rate_test.jsx 中“点击第 3 颗星后state1.value等于 3”的断言L25-L31正是对这一换算的验证“With text” 用例则断言点击第 4 颗星后文字为good即texts[3]印证了可编辑态文字按下标取值的逻辑。小结Rate 组件以“0 基索引 阈值映射”为内部模型对外暴露 1 基分值colors/iconClasses配合双阈值实现三档视觉区分allowHalf通过鼠标clientX与图标宽度的比较实现左半星判定与 50% 宽度的半星渲染showText在非只读态按Math.ceil取texts文案、只读态走textTemplate占位替换disabled状态下所有交互方法被短路仅保留展示能力含小数分值下“≥0.5 填充半星”的规则。属性、事件与默认值可直接对照 site/docs/en-US/rate.md 的表格实现细节与边界行为可进一步查阅 src/rate/Rate.jsx 及 src/rate/test/rate_test.jsx。赞分享前端UI组件设计系统【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载相关推荐3行代码实现电商星级评分Element Plus Rate组件半星交互全攻略3行代码实现电商星级评分Element Plus Rate组件半星交互全攻略 你是否还在为实现星级评分功能编写大量JS逻辑是否遇到过半星评分计算不准确、UI前端UI组件antd-mobile Rate 评分组件完全指南属性、交互原理与样式定制antd mobile Rate 评分组件完全指南属性、交互原理与样式定制 Rate 是 ant design mobile 中用于用图形表示评分等级程度UI组件前端移动开发Vant Rate 评分组件完全指南从基础用法到源码级交互原理Vant Rate 评分组件完全指南从基础用法到源码级交互原理 Rate评分是 Vant 组件库中用于对事物进行评级的轻量级交互组件。在移动端电商、内前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考