评分组件

评分组件 rate 一般用于等级展示或评价类操作。

示例

  <div id="ID-rate-demo"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 渲染
  rate.render({
    elem: '#ID-rate-demo'
  });
});
</script>

显示文字

  <div id="ID-rate-demo-text"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 渲染
  rate.render({
    elem: '#ID-rate-demo-text',
    value: 2, // 初始值
    text: true // 开启文本
  });
});
</script>

半星效果

  <div id="ID-rate-demo-half-1"></div>
<hr>
<div id="ID-rate-demo-half-2"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 渲染
  rate.render({ // eg1
    elem: '#ID-rate-demo-half-1',
    value: 2.5, // 初始值
    half: true // 开启半星
  });
  rate.render({ // eg2
    elem: '#ID-rate-demo-half-2',
    value: 3.5,
    half: true,
    text: true
  });
});
</script>

自定义文本

  <div id="ID-rate-demo-setText-1"></div>
<hr>
<div id="ID-rate-demo-setText-2"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 渲染
  rate.render({ // eg1
    elem: '#ID-rate-demo-setText-1',
    value: 3,
    text: true,
    setText: function(value){ // 自定义文本的初始回调
      var arrs = {
        '1': '非常不满意',
        '2': '不满意',
        '3': '一般',
        '4': '满意',
        '5': '非常满意',
      };
      this.span.text(arrs[value] || ( value + "星"));
    }
  });
  rate.render({ // eg2
    elem: '#ID-rate-demo-setText-2',
    value: 1.5,
    half: true,
    text: true,
    setText: function(value){
      this.span.text(value);
    }
  });
});
</script>

自定义长度

  <div id="ID-rate-demo-length-1"></div>
<hr>
<div id="ID-rate-demo-length-2"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 渲染
  rate.render({
    elem: '#ID-rate-demo-length-1',
    length: 3
  });
  rate.render({
    elem: '#ID-rate-demo-length-2',
    length: 10,
    value: 8 // 初始值
  });
});
</script>

只读

  <div id="ID-rate-demo-readonly"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 渲染
  rate.render({
    elem: '#ID-rate-demo-readonly',
    value: 4,
    readonly: true
  });
});
</script>

自定义主题色

  <div class="class-rate-demo-theme" lay-options="{value: 3, theme: '#FF8000'}"></div>
<hr>
<div class="class-rate-demo-theme" lay-options="{value: 3, theme: '#FE0000'}"></div>
<hr>
<div class="class-rate-demo-theme" lay-options="{value: 2.5, theme: '#1E9FFF', half: true}"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 批量渲染
  rate.render({
    elem: '.class-rate-demo-theme',
    // theme: '#FF8000' // 自定义主题色
  });
});
</script>

API

API	描述
var rate = layui.rate	获得 `rate` 模块。
基础接口 ^2.11+	该组件由 `component` 构建，因此继承其提供的基础接口。
rate.render(options)	rate 组件渲染，核心方法。

渲染

rate.render(options);

参数 options : 基础属性选项。#详见属性
注 ^2.8+ : 除 elem 属性外，其他基础属性也可以直接写在元素的 lay-options="{}" 属性中。

<div id="ID-test-rate"></div>
<div class="class-test-rate" lay-options="{value: 3}"></div>
<div class="class-test-rate" lay-options="{value: 5}"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var rate = layui.rate;
  // 单个渲染
  rate.render({
    elem: '#ID-test-rate'
  });
  // 批量渲染
  rate.render({
    elem: '.class-test-rate'
  });
});
</script>

属性

属性名	描述	类型	默认值
elem	绑定元素选择器或 DOM 对象	string/DOM	-
length	评分的最大长度值，即星星的数量。	number	`5`
value	评分的初始值	number	`0`
half	是否可以选择半星。若开启，则 `value` 支持小数点，如： `value: '3.5'`	boolean	`false`
theme	主题色	string	`#FFB800`
text	是否显示评分对应的文本	boolean	`false`
readonly	是否只读，即只用于展示，而不可点击	boolean	`false`
setText	初始设置自定义文本的回调函数。并返回当前 `value` 参数。用法详见：#自定义文本
choose	选择评分后的回调函数。并返回当前 `value` 参数 `rate.render({ elem: '#id', choose: function(value){ console.log(value); // 获得选中的评分值 } });`