问题背景
使用layer作为后台CRUD UI体系的时候,大多数 添加/编辑
功能我是使用了layer.open
来打开一个模态页面框。该方案在高分辨率的时候十分友好,但是在低分辨率特别是笔记本上显示效果堪忧,建议全面。
所以我们的解决思路是: 利用js判断分辨率
,width横向分辨率
大于 1366则layer默认小窗口,如果横向低于或者等于1366分辨率
则直接layer全屏
。
大屏
的范围一般是从width大于1366开始,例如我这个2k屏编辑起来就超级无敌爽,width小于或者低于1366,例如那些破笔记本,直接视为小分辨率,模态框全部改为全屏显示。
解决方案
原代码
如下
/**
* tool监听事件:表格编辑删除等功能按钮
*/
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['800px', '600px'],
content: '${request.contextPath}/certCompany/edit?id='+obj.data.certId+'&token='+layui.data('token').token,
});
return false;
}
}
如何做最少改动
呢,于是我想到了加一个js方案去判断和变更。
/**
* 低分辨率模式直接全屏
* by zhengkai.blog.csdn.net
*/
function setFullScreen(index){
const screenWidth = screen.width;
console.log(screenWidth);
//笔记本分辨率,直接全屏
if(screenWidth<=1366){
layer.full(index);
}
}
/**
* tool监听事件:表格编辑删除等功能按钮
*/
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['800px', '600px'],
content: '${request.contextPath}/certCompany/edit?id='+obj.data.certId+'&token='+layui.data('token').token,
});
//低分辨率模式直接全屏
setFullScreen(index);
return false;
}
}
验证效果
分辨率小于等于1366
,默认全屏模式
分辨率大于1366
,默认小窗口模式
Done!