【Layui】12 评分 Rate

文档地址：

https://www.layui.com/demo/rate.html

 

基础样式：

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>基础效果</legend>
</fieldset>

<div id="test1"></div>

<script>
    layui.use('rate',function () {
        let rate = layui.rate;
        //基础效果
        rate.render({
            elem: '#test1'
        });
    });
</script>

可以根据鼠标点击评分星号图标

 

相关样式属性：

设定初始值：

value: 2 //初始值

开启文本显示：

text: true //开启文本

 

开启半分评星：

half: true //开启半星

设定自定义文本：

text: true，
setText: function(value){ //自定义文本的回调
      var arrs = {
        '1': '极差'
        ,'2': '差'
        ,'3': '中等'
        ,'4': '好'
        ,'5': '极好'
};
this.span.text(arrs[value] || ( value + "星"));

半星自定义文本：

要注意的是，半星设置自定义他的步长就是0.5

half: true,
text: true,
setText: function(value){
this.span.text(value);
}

 

评分长度自定义：

就是设置总共几颗星

length: 3

设置只读属性：

评分将不可改变，仅浏览用

readonly: true

评分颜色设置：

直接调用主题色

theme: '#FF8000' //自定义主题色