layui之layer根据分辨率调整全屏(js判断分辨率)

问题背景

使用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!

©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页