layui框架学习（21：评分模块）

本文链接：https://blog.csdn.net/gc_2299/article/details/129868801

Layui的评分模块rate主要是以评星形式实现评分，用于对内容或其它信息进行评价。rate模块主要是以调用代码为主，不需要在元素中使用预设类。使用评分模块实现打星功能时，只需定义承载评分功能的容器元素，然后调用rate.render函数指定渲染该元素即可。评分模块的基本用法及效果如下所示：
在这里插入图片描述

	<div class="ratedeme layui-bg-green" style="margin-left: 100px;margin-top: 100px;"></div>
	<script>
	  layui.use('rate', function(){
	    var rate = layui.rate;
	   
	    rate.render({
	      elem: '.ratedeme'  //绑定元素
	    });
	  });
	  </script>

基础参数length设置评分的总星数，整数类型，其用法及效果如下所示：
在这里插入图片描述

	layui.use('rate', function(){
	    var rate = layui.rate;
	   
	    rate.render({
	      elem: '.ratedeme',
		  length:10
	    });
	  });

基础参数value设置初始评分值，也就是评分功能显示的初始实心星星数量。
在这里插入图片描述

	layui.use('rate', function(){
	    var rate = layui.rate;
	   
	    rate.render({
	      elem: '.ratedeme',
		  length:10,
		  value:6
	    });
	  });

基础参数theme设置星星的颜色，包括边框颜色及填充颜色，比如设置为红色的代码及效果如下所示：
在这里插入图片描述

	rate.render({
      elem: '.ratedeme',
	  length:10,
	  value:6,
	  theme:'#FF0000'
    });

基础参数half设置是否支持选择和显示半星，也即评分最小粒度为0.5分。代码及效果如下所示：
在这里插入图片描述

	rate.render({
      elem: '.ratedeme',
	  length:10,
	  value:5.5,
	  theme:'#FF0000',
	  half:true
    });

基础参数text设置是否显示评分值，布尔值，默认不显示。代码及效果如下所示：
在这里插入图片描述

	rate.render({
     elem: '.ratedeme',
	  length:10,
	  value:5.5,
	  theme:'#FF0000',
	  half:true,
	  text:true
    });

基础参数readonly设置评分功能是否为只读，布尔值，默认为false。
除了上述基础参数，rate模块还支持处理setText和choose两种事件，前者在初次渲染评分元素和点击后时触发，后者在评分元素被点击后触发。关于这两种事件的用法请查看参考文献2-3，在此不再赘述。

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/