Layui评分组件rate如何设置成支持半星0.5分评价

layui rate 组件原生不支持半星，因底层用 Math.floor 截断小数；需设 text: true 并自定义 HTML+CSS 渲染半星，max 设为 2 的倍数（如 10 表示 5 星），value 传整数（如 7 表示 3.5），change 回调中手动除以 2 转换，并重写 hover/click 事件以精准控制半星交互。

layui rate 组件默认不支持半星，必须手动改写渲染逻辑

原生 layui.rate 只接受整数（1、2…），传入 2.5 会直接截断为 2，ui 上也只显示整颗星。这不是配置问题，是底层用 math.floor 硬截的 —— 想支持半星，得绕过它自己画。

用 text 模式 + 自定义 HTML 替代默认图标渲染

避开 rate 的星星 DOM 生成逻辑，改用 text: true 让它只输出纯文本值，再用自定义 HTML + CSS 实现半星效果。这是最稳、兼容性最好、不碰 layui 内部源码的方式。

• elem 选一个空容器（比如 <div id="rate-half"></div>）
• 初始化时设 text: true，并监听 change 事件拿到当前值
• 在事件回调里，用 JS 拼出带半星的 HTML（例如：3 颗实心 + 1 颗半心 + 1 颗空心）
• 用 CSS 控制 ::before 或背景裁切实现半星，推荐用两个重叠的 <i>：前半用黄色，后半用灰色

注意 value 和 max 的单位要统一为 0.5 倍数

如果你希望用户能点出 1.5、2.5 这样的值，就不能沿用默认的整数步进逻辑。必须把 max 设为整数倍的 2（如 max: 10），然后把最终值除以 2 得到实际评分（5 → 2.5）。否则鼠标 hover 时高亮错位、点击取值不准。

• 设 max: 10 表示最多 5 颗星，每颗星拆成 2 个半星单位
• 初始值传 value: 7 表示 3.5 分（7 ÷ 2）
• change 回调里拿到的是整数（如 7），需手动转成 value / 2
• 别忘了在 tooltip 或隐藏域里同步写入真实分值（3.5），别只存 7

hover 交互和点击精度容易失准，得重写事件绑定

原生 rate 的 mousemove 是按整星区域划分的，直接套用会导致半星 hover 错位、点击只能落到整星中心。你得自己监听容器内所有子元素（每个半星块）的 mouseenter，并计算相对位置来决定高亮几个半星。

• 每个半星建议用独立 <span class="star-half"></span>，宽高固定（如 16px）
• 用 offsetLeft + getBoundingClientRect() 算鼠标 X 偏移，判断落在左半还是右半
• 点击时直接取当前高亮总数，不要依赖 rate.getValue()（它还是返回整数）
• 移动端要额外加 touchstart，不然手指点不准

layui 的 rate 组件对半星的支持是“表面不可行”，真正落地时几乎要重写交互层。最容易被忽略的是：数值存储单位和 UI 显示单位不一致导致的四舍五入误差，比如后端要 3.5，但前端没做 /2 转换，存成了 7，后续所有统计都偏了。