layui 使用总结

layui 陪伴多年，最近忙里偷闲写点心得，供大家参考，不足之处，多多指教啦！

官网：https://www.layui.com/doc/

layui 量级较轻的同时支持多种效果，如常用的轮播、表单、栅格等等，个人比较喜欢。

使用中发现 layui 中会存在一些不太注意就会发生问题的小细节，在此整理（按照layui文档顺序整理）

1、栅格部分

     如果不考虑响应式的话，现在 PC 支持的最小宽度为 1200px ，所以可全局设置 body{ min-width:1200px }，

     然后使用 layui-col-xs ，这样哪怕使用小于 1200px 的设备，如 pad、手机等，将出现滚动条，但页面不会变形

2、主题部分

     layui 支持的主题色不是很多，更适合做后台，所以如果想更换主题，可以定义一个全局颜色class类，用变量进行控制

3、表单部分

    各种事件监听后，如 select、checkbox、switch、submit 等等，只要需要更新数据或重新渲染，一定记得使用

    from.render()，萌新时多次踩坑，一把辛酸泪

4、表格及分页部分

   表格的数据渲染，建议定义公共函数进行调用，避免代码冗余，分页的配置需和后台沟通清楚

   如后台返回格式不是 layui.table 默认的格式，可按照使用文档中进行修改，如：

          parseData 部分 —— 数据格式解析的回调函数

               parseData: function(res){ //res 即为原始返回的数据

                        return {

                                   "code": res.status, //解析接口状态

                                   "msg": res.message, //解析提示文本

                                   "count": res.total, //解析数据长度

                                   "data": res.data.item //解析数据列表

                         };

                }

          request 部分 —— 用于对分页请求的参数            

                 request: {

                        pageName: 'curr' ，//页码的参数名称，默认：page

                        limitName: 'nums' //每页数据量的参数名，默认：limit

                 }

          response 部分 —— 重新规定返回的数据格式            

                 response: {

                          statusName: 'status'， //规定数据状态的字段名称，默认：code

                          statusCode: 200， //规定成功的状态码，默认：0

                          msgName: 'hint'， //规定状态信息的字段名称，默认：msg

                          countName: 'total'， //规定数据总数的字段名称，默认：count

                          dataName: 'rows'， //规定数据列表的字段名称，默认：data

                 }

5、文件上传部分

   现如今基本使用 oss 上传，无需后台多存储一遍，所以只需拿到配置好的 oss 路径，得到返回值后传递给后台即可

6、新增了 穿梭框、树形控件（内心好满足，解决大问题了），暂时还未使用，遇到问题会来补充哒

7、轮播部分

     轮播组件很实用，没有需要补充的地方，只需记得设置宽度的适配就好啦

 

 

总结完成，发现问题持续更新，也期待大家提建议~~~