layui 陪伴多年,最近忙里偷闲写点心得,供大家参考,不足之处,多多指教啦!
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、轮播部分
轮播组件很实用,没有需要补充的地方,只需记得设置宽度的适配就好啦
总结完成,发现问题持续更新,也期待大家提建议~~~