初始分值必须在rate.render()时通过value参数传入,渲染后无法靠dom操作设初值;常见不生效原因包括dom未加载完成、half未开启却传小数、容器含内容且误用data-value属性。
初始分值必须在 rate.render() 时通过 value 参数传入,渲染后无法靠 dom 操作或 class 手动“设初值”——这是最常踩的坑。
为什么直接写 value: 3.5 有时不生效?
常见原因有三个:
- DOM 元素还没加载完成就执行了
rate.render(),建议用layui.use(['rate'], function(){...})包裹,或确保脚本放在容器之后 -
half: true没开,但传了小数——此时value: 3.5会被向下取整为3(文档明确说明) - 容器元素本身已有内容(比如写了
<i></i>或文字),Layui 会清空它再渲染,但若你误把value写在了 HTML 属性里(如data-value="3.5"),它不会自动读取
value 的单位和 half 开关必须匹配
半星不是“视觉切一半”,而是逻辑粒度切换。关键点:
- 开
half: true→value可传0.5、2.5、4.5等任意 0.5 倍数,组件内部按半星单位处理 - 关
half: false(默认)→value: 3.5会被强制转成3;value: 3.6会变成4;只认整数 - 如果用了自定义
length(比如length: 10),value仍按“星数”理解:10 颗星下value: 7表示亮 7 颗,不是百分比
动态回填初始值(比如表单编辑场景)
页面加载后从接口拿到数据,想把评分设成 4.5,不能只改 value 属性或写 innerHTML:
- 必须调用
rate.set(elem, value),例如rate.set('#my-rate', 4.5) - 这个方法只更新 UI 和内部状态,不会触发
change回调,业务逻辑(比如同步 hidden input)得手动补上 - 别用 jQuery 触发事件,
rate不走原生 DOM 事件流,$(elem).trigger('change')无效
复杂点在于:初始值若来自异步接口,而 rate.render() 是同步执行的,必须等数据回来再调 rate.set();很多人卡在这一步,以为“渲染完就定死了”。











