layui遇到的一些问题

一、layui nav 菜单栏默认收缩

默认收缩的是li上的class 去掉 layui-nav-itemed。就可以了。我一直再找的是ul标签上的。

<div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!-- 下面的li元素的class加上 layui-nav-itemed 就可以展开二级菜单 -->
                    <li class="layui-nav-item">
                        <a href="javascript:;">主动安全管理</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;" class="leftdaohang" data-url="ADAS" mytitle="高级辅助驾驶(ADAS)">高级辅助驾驶(ADAS)</a>
							</dd>
							<dd>
								<a href="javascript:;" class="leftdaohang" data-url="BSD" mytitle="驾驶远监测(BSD)">驾驶远监测(BSD)</a>
							</dd>
							<dd>
								<a href="javascript:;" class="leftdaohang" data-url="DSM" mytitle="盲区检测(DSM)">盲区检测(DSM)</a>
							</dd>
                            <dd>
								<a href="javascript:;" class="leftdaohang" data-url="SDA" mytitle="激烈驾驶行为(SDA)">激烈驾驶行为(SDA)</a>
							</dd>
                            <dd>
								<a href="javascript:;" class="leftdaohang" data-url="UploadConfig" mytitle="附件上传策略配置">附件上传策略配置</a>
							</dd>
						</dl>
                    </li>
                    
                    <li class="layui-nav-item leftdaohang" data-url="online" mytitle="上下线统计"><a>上下线统计</a></li>
                    <li class="layui-nav-item leftdaohang" data-url="alarm" mytitle="警报统计"><a>警报统计</a></li>
                </ul>
            </div>
        </div>

二、layui 数据表格 单元格 颜色设置

{
    
     field: 'attachmentInfo', title: languageTL.count.alarmData[0],align: 'center', event: 'setOnline',
        templet:function(d){
    
    
            if (!d.attachmentInfo.uploadedNumber) {
    
    
                return '<ul class="dataRow" style="color: rgba(50,130,216,1); text-decoration: underline; cursor: pointer;">0/' + d.attachmentInfo.number + '</ul>';
            } else {
    
    
                return '<ul class="dataRow" style="color: rgba(50,130,216,1); text-decoration: underline; cursor: pointer;">' + d.attachmentInfo.uploadedNumber+ '/' +d.attachmentInfo.number + '</ul>';
            }
        }
    }

附件信息那一栏有变化了，可以根据class="dataRow"改变颜色

三、layui表格没有数据的时候，表头没有横向滚动条

table的配置文件增加回调函数
done: function (res, curr, count) {
fixedLayuiTable(this,count);
}

layui.use(['table'], function () {
    
    
    tableView = layui.table;
    tableView.render({
    
    
        elem: '#tabView',
        data: listData,
        height: '520',
        cellMinWidth: 80,
        cols: [colsList],
        page: true, //是否显示分页
        limits: [10, 100, 1000, 2000],
        page: {
    
    
            count: listData.length,
            prev: '上一页',
            next: '下一页',
            layout: ['prev', 'page', 'next', 'count']
        },
        done: function (res, curr, count) {
    
    
            fixedLayuiTable(this, count);
        }
    });

});       

/**
* 解决table在没有数据的时候,因表格列宽度超出了浏览器的宽度，导致没有横向滚动条
* 使用：在table的参数中添加回调函数done: function (res, curr, count) {fixedLayuiTable(this,count);}
* @param {object} tableobj
* @param {number} count
* @param {boolean} 是否分页
*/
function fixedLayuiTable(tableobj,count,ifpage) {
    
    
    if (count == 0) {
    
    
        tableobj.elem.next('.layui-table-view').find('.layui-table-header').css('display', 'inline-block');
        var tableBox =tableobj.elem.next('.layui-table-view').find('.layui-table-box');
        tableBox.css('overflow-x', 'auto');
        //改变高度：table没有分页高度减15，否则增加25
        if (!ifpage) {
    
    
            tableBox.height(tableBox.height() - 15);
        } else {
    
    
            tableBox.height(tableBox.height() + 25);
        }
    }
}

四、layui layer.open 弹窗全屏显示

let index =layer.open({
    
    
   type: 2,
   area: ['100%', '100%'], // 100%全屏
   shadeClose: true,
   shade: 0.4,
   title: '', // 标题留空让弹窗页头隐藏掉
   closeBtn: 0, // 不显示右上角那个X关闭按钮
   content: url // 内容
});
layer.full(index);

五、layui表格通过点击tr改变这一行的颜色

$("body").on('click','.layui-table-body tr ',function () {
    
    
          console.log(this);
          var data_index=$(this).attr('data-index');//得到当前的tr的index
          console.log($(this).attr('data-index'));
          $(".layui-table-body tr").attr({
    
    "style":"background:#FFFFFF"});//其他tr恢复颜色
          $(".layui-table-body tr[data-index="+data_index+"]").attr({
    
    "style":"background:#99ff99"});//改变当前tr颜色
});

六、 layer.open弹框弹出后父页面滚动问题

链接: layer.open弹框弹出后父页面滚动问题.

layer.open({
    
    
    type: 1,
    area: ['680px', 'auto'],
    scrollbar: false,
    zIndex: 50,
    shade: 0.2,
    shadeClose: true,
    title: '标题',
    content: '内容'
});

设置scrollbar为false，弹框弹出时，父页面不能滚动但会回到页面顶部；scrollbar默认为true，父页面能滚动但不会回到页面顶部。

暂时没有找到能够解决的办法，不知道为什么layui官网上的在线调试没有受到scrollbar的影响都不会回到顶部，望高人指点

七、LayUI下拉框中取值和获取属性方法

获取下拉框选中的值

var configId = $("#labelSelect").find(“option:selected”).val();
var optionId = $("#optionSelect").find(“option:selected”).val();

清空下拉框

$("#labelSelect").find(“option:selected”).val("");
$("#optionSelect").find(“option:selected”).val("");
form.render(‘select’);

给下拉框添加值

$("#optionSelect").append(‘全部’);

获取下拉框选中的option的属性

var labeltype = $("#ID").find(“option:selected”).attr(“属性名”);

八、LayUI 获取下拉框的选中的值

form.on('select(category)', function (data) {
    
    
     console.log(data.value);
});

九、layer alert时 点击其他地方会关闭

function editSuccess(){
    
    
    layer.confirm('修改成功', {
    
      btn : [ '确定'],title: '操作提示',icon: 0
    }, function(index) {
    
    
        layer.close(index);
    });
}

十、Layui表格点击行选中复选框，点击行选择复选框

// 表格点击行自动选中 ==========================================================================
	$(document).on("click",".layui-table-body table.layui-table tbody tr", function (e) {
    
    
		var index = $(this).attr('data-index');
		var tableBox = $(this).parents('.layui-table-box');
		//存在固定列
		if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
    
    
			tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
		} else {
    
    
			tableDiv = tableBox.find(".layui-table-body.layui-table-main");
		}
		var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
		if (checkCell.length > 0) {
    
    
			checkCell.click();
		}
	});

	// 表格点击行出发复选框后，阻止向上冒泡===============================================================
	$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
    
    
		e.stopPropagation();
	});

Layui表格点击行选中复选框，点击行选择复选框

第二种方法

table.on('row(tabView)', function (obj) {
    
    
        //用obj.tr.eq(0)不行，有2行
        var cbox = obj.tr.find('.layui-form-checkbox'), rowindex = obj.tr.eq(0).data("index");
        console.log(cbox)
        console.log(obj)
        if (cbox.hasClass('layui-form-checked')) {
    
    
            cbox.removeClass("layui-form-checked");
        }
        else {
    
    
            cbox.addClass("layui-form-checked");
        }
        window._selectRole = {
    
     RoleID: obj.data.RoleID, RoleName: obj.data.RoleName };
    });

layui table 单击行选中复选框

十一、layui表格 获取选中数据 多选框勾选数量

var list= layui.table.checkStatus('gridid').data;

十二、layui的从一个选项卡跳到另一个选项卡

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li lay-id=1 class="layui-this">帧率信息</li>
        <li lay-id=2>GOP信息</li>
    </ul>
    <div class="layui-tab-content">

        <div class="layui-tab-item layui-show">
            <h1>第一个选项卡</h1>
        </div>
        <div class="layui-tab-item">
            <h1>第二个选项卡</h1>
        </div>
    </div>
</div>

最主要的就是
1.lay-filter=“docDemoTabBrief”
2.lay-id=1 （跳转的序号）

layui.use('element', function () {
    
    
    let element = layui.element;
    element.tabChange('docDemoTabBrief', 2); 
});

十三、layui表格的合并行处理

layui.use('table', function () {
    
    
     table = layui.table;

     table.render({
    
    
         elem: '#videoTable',
         data: videoData,
         height: '410',
         width: '100%',
         defaultToolbar: [],
         cellMinWidth: 100,
         cols: [colsListFalse],
         page: true, //是否显示分页
         limits: [10, 100, 1000, 2000],
         page: {
    
    
             count: videoData.length,
             prev: '上一页',
             next: '下一页',
             layout: ['prev', 'page', 'next', 'count']
         },
         done: function (res, curr, count) {
    
    
             mergeRows(res)
         }
     });
});

// 这里是从别人那里拷贝来的代码
        function mergeRows(res) {
    
    
            var data = res.data;
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            // var columsName = ['deviceId', 'ypRL', 'ypLoading', 's1RL', 's1Loading', 's2RL', 's2Loading'];//需要合并的列名称
            var columsName = ['deviceId'];//需要合并的列名称
            // var columsIndex = [0, 2, 3, 7, 8, 12, 13];//需要合并的列索引值
            var columsIndex = [0];//需要合并的列索引值

            for (var k = 0; k < columsName.length; k++) {
    
     //这里循环所有要合并的列
                var trArr = $('div[lay-id="videoTable"] .layui-table-body>.layui-table').find("tr");//所有行，如果页面多个表格，这里一定要定位到你所要合并的表格
                for (var i = 1; i < res.data.length; i++) {
    
     //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                    if (data[i][columsName[k]] === data[i - 1][columsName[k]]) {
    
     //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        tdPreArr.each(function () {
    
    //相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {
    
    //当前行隐藏
                            $(this).css("display", "none");
                        });
                    } else {
    
    
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
                mergeIndex = 0;
                mark = 1;
            }
        }

​十四、layUI:table表格的单击事件，双击事件，获取所在行的数据

table.render({
    
    
	 done: function(res, curr, count){
    
    
         $('#tableId').next().find('.layui-table-body').find("table" ).find("tbody").children("tr").on('dblclick',function(){
    
    
         var id = JSON.stringify($('#tableId').next().find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
                var obj = res.data[id];
                console.log("行双击事件");

          });
          $('#tableId').next().find('.layui-table-body').find("table" ).find("tbody").children("tr").on('click',function(){
    
    
          var id = JSON.stringify($('#tableId').next().find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
                 var obj = res.data[id];
                 console.log("行单击事件");
          });
	}
});

十五、layui数据表格中根据条件展示/隐藏toolbar中的按钮

<script>
layui.use('laytpl', function(){
    
    
  var laytpl = layui.laytpl;
)}
</script>

<script type="text/html" id="current_table_bar">

<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
@{
    
    {
    
    # if(d.pid == 0){
    
     }}
<a class="layui-btn layui-btn-normal layui-btn-xs dispatch-clerk" lay-event="dispatch">添加</a>
@{
    
    {
    
    # } }}
</script>

十六、layui按钮button的js设置disabled

​
设置disabled

$('#butid').addClass("layui-btn-disabled").attr("disabled",true);

恢复可点击

$('#butid').removeClass("layui-btn-disabled").attr("disabled",false);

十七、table.cache[‘‘]获取表格当前页的所有行数据

layui.table.cache['tablename'] 获取所有数据。

十八、layui中根据条件判断使table单元格变色

done:function (res,curr,count) {
    
    
	var that = this.elem.next();
	var preliminaryDayList = res.data;  // 拿到后台给的数据
    preliminaryDayList.forEach(function (item,index) {
    
     // 循环取后台给的条件的值
        if (item.isPreliminaryDay == true) {
    
    
            that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#FA8072"); // 行变色
        }
    });
}

十九、Layui table中筛选列增加 [全选，反选] 功能

table.on('toolbar()', function (obj) {
    
    
var config = obj.config;
var btnElem = $(this);
var tableId = config.id;
var tableView = config.elem.next();
switch (obj.event) {
    
    
    case 'LAYTABLE_COLS':
    // 给筛选列添加全选还有反选的功能
    var panelElem = btnElem.find('.layui-table-tool-panel');
    var checkboxElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]');
    var checkboxCheckedElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]:checked');
    $('<li class="layui-form" lay-filter="LAY_TABLE_TOOL_COLS_FORM">' +
        '<input type="checkbox" lay-skin="primary" lay-filter="LAY_TABLE_TOOL_COLS_ALL" '
        + ((checkboxElem.length === checkboxCheckedElem.length) ? 'checked' : '') + ' title="全选">' +
        '<span class="LAY_TABLE_TOOL_COLS_Invert_Selection">反选</span></li>')
        .insertBefore(panelElem.find('li').first())
        .on('click', '.LAY_TABLE_TOOL_COLS_Invert_Selection', function (event) {
    
    
        layui.stope(event);
        // 反选逻辑
        panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]+').click();
        });
    form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
    break;
}
});

// 监听筛选列panel中的全选
form.on('checkbox(LAY_TABLE_TOOL_COLS_ALL)', function (obj) {
    
    
$(obj.elem).closest('ul')
    .find('[lay-filter="LAY_TABLE_TOOL_COLS"]' + (obj.elem.checked ? ':not(:checked)' : ':checked') + '+').click();
});

// 监听筛选列panel中的单个记录的change
$(document).on('change', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]', function (event) {
    
    
var elemCurr = $(this);
// 筛选列单个点击的时候同步全选的状态
$('input[lay-filter="LAY_TABLE_TOOL_COLS_ALL"]')
    .prop('checked',
    elemCurr.prop('checked') ? (!$('input[lay-filter="LAY_TABLE_TOOL_COLS"]').not(':checked').length) : false);
form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
});

二十、layui穿梭框右侧增加上移下移功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css">
    <style>
        .layuiTransformBtns{
      
      
            /*border:1px solid red;*/
            display: inline-block;
            position: absolute;
            z-index: 19999;
            top:26%;
            left:16%
        }
    </style>
    <script src="js/jquery.min.1-11-3.js"></script>
    <script src="js/layui-v2.5.6/layui/layui.js"></script>
</head>
<body>
<div id="usingGrid" style="position:relative;">
    <div class="layuiTransformBtns" style="">
        <button type="button" data-direction="up" class="layui-btn layui-btn-sm videoMoveBtn" style="margin-bottom: 95px;"><i class="layui-icon layui-icon-up"></i></button><br>
        <button type="button" data-direction="down" id="moveDown" class="layui-btn layui-btn-sm videoMoveBtn"><i class="layui-icon layui-icon-down"></i></button>
    </div>
    <div id="test3" class="demo-transfer"></div>
    <button type="button" id="getRightData" class="layui-btn layui-btn-sm">取数据</button>
    <div class="layui-form-mid layui-word-aux">数据显示在控制台</div>
</div>
 
<script>
    $(function(){
      
      
        layui.use(['transfer', 'layer', 'util'], function(){
      
      
            var $ = layui.$
                ,transfer = layui.transfer
                ,layer = layui.layer
            data2 = [
                {
      
      "value": "1", "title": "瓦罐汤"}
                ,{
      
      "value": "2", "title": "油酥饼"}
                ,{
      
      "value": "3", "title": "炸酱面"}
                ,{
      
      "value": "4", "title": "串串香"}
                ,{
      
      "value": "5", "title": "豆腐脑"}
                ,{
      
      "value": "6", "title": "驴打滚"}
                ,{
      
      "value": "7", "title": "北京烤鸭"}
                ,{
      
      "value": "8", "title": "烤冷面"}
                ,{
      
      "value": "9", "title": "毛血旺"}
                ,{
      
      "value": "10", "title": "肉夹馍"}
                ,{
      
      "value": "11", "title": "臊子面"}
                ,{
      
      "value": "12", "title": "凉皮"}
                ,{
      
      "value": "13", "title": "羊肉泡馍"}
                ,{
      
      "value": "14", "title": "冰糖葫芦"}
                ,{
      
      "value": "15", "title": "狼牙土豆"}
            ]
            //初始右侧数据
            transfer.render({
      
      
                elem: '#test3'
                ,data: data2
                ,value: ["1", "3", "5", "7", "9", "11"]
                ,id: 'demo1' //定义索引
            })
 
 
            // 当前元素在父元素的位置
            $('#getRightData').click(function () {
      
      
                //获得右侧数据
                var getData = transfer.getData('demo1');
                console.log(getData);
            })
 
            $('.videoMoveBtn').click(function () {
      
      
                transfornMove({
      
      
                    elem:'#usingGrid',
                    direction:$(this).data('direction')
                })
            })
 
            //layui穿梭框上移、下移功能
            function transfornMove(option) {
      
      
                // debugger
                //右侧穿梭框
                var rightTransforn=$($(option.elem+ " ul")[1])
                // 穿梭框选中的元素
                var checkItem=rightTransforn.find('.layui-form-checked').parent()
                // 穿梭框右侧下面部分
                var rightTransBottom=rightTransforn.children()
                // 第一个元素的下标
                var checkOneIndex=rightTransBottom.index(option.direction=='down'?checkItem[checkItem.length-1]:checkItem[0])
                // 右侧有几条数据
                var rightDataLength=rightTransBottom.length
                console.log('右侧共有' , rightDataLength , '条数据');
                console.log('当前选择的元素',checkItem);
                console.log('第一个元素的下标',checkOneIndex);
                console.log('当前元素在父元素的位置',rightTransBottom.index(checkItem));
                if(!checkItem.length){
      
      
                    layer.msg("请选择数据后再操作");
                    return;
                }
                // 上移时，取第一个元素在父元素的位置，如果在第一位就不再移动
                if(checkOneIndex==(option.direction=='down'?rightDataLength-1:0)){
      
      
                    layer.msg("移不动啦");
                    return;
                }
                if(option.direction=='down'){
      
      
                    for(var i=checkItem.length;i>=0;i--){
      
      
                        checkItem.eq(i).next().after(checkItem.eq(i));
                    }
                }else{
      
      
                    for(var i=0;i<checkItem.length;i++){
      
      
                        checkItem.eq(i).prev().before(checkItem.eq(i));
                    }
                }
            }
 
        })
 
    })
</script>
</body>
</html>

二十一、Layui中如何在table中筛选列增加 [全选，反选]

table.on('toolbar()', function (obj) {
    
    
var config = obj.config;
var btnElem = $(this);
var tableId = config.id;
var tableView = config.elem.next();
switch (obj.event) {
    
    
    case 'LAYTABLE_COLS':
    // 给筛选列添加全选还有反选的功能
    var panelElem = btnElem.find('.layui-table-tool-panel');
    var checkboxElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]');
    var checkboxCheckedElem = panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]:checked');
    $('<li class="layui-form" lay-filter="LAY_TABLE_TOOL_COLS_FORM">' +
        '<input type="checkbox" lay-skin="primary" lay-filter="LAY_TABLE_TOOL_COLS_ALL" '
        + ((checkboxElem.length === checkboxCheckedElem.length) ? 'checked' : '') + ' title="全选">' +
        '<span class="LAY_TABLE_TOOL_COLS_Invert_Selection">反选</span></li>')
        .insertBefore(panelElem.find('li').first())
        .on('click', '.LAY_TABLE_TOOL_COLS_Invert_Selection', function (event) {
    
    
        layui.stope(event);
        // 反选逻辑
        panelElem.find('[lay-filter="LAY_TABLE_TOOL_COLS"]+').click();
        });
    form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
    break;
}
});

// 监听筛选列panel中的全选
form.on('checkbox(LAY_TABLE_TOOL_COLS_ALL)', function (obj) {
    
    
$(obj.elem).closest('ul')
    .find('[lay-filter="LAY_TABLE_TOOL_COLS"]' + (obj.elem.checked ? ':not(:checked)' : ':checked') + '+').click();
});

// 监听筛选列panel中的单个记录的change
$(document).on('change', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]', function (event) {
    
    
var elemCurr = $(this);
// 筛选列单个点击的时候同步全选的状态
$('input[lay-filter="LAY_TABLE_TOOL_COLS_ALL"]')
    .prop('checked',
    elemCurr.prop('checked') ? (!$('input[lay-filter="LAY_TABLE_TOOL_COLS"]').not(':checked').length) : false);
form.render('checkbox', 'LAY_TABLE_TOOL_COLS_FORM');
});

二十二、Layui表单必填项自动打红色*号

<style>
  	.layui-input{
    
    height:30px;} /* layui-input 默认太高了，这里固定高度*/
  	label.required:after {
    
       /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
        content: ' *';
        color: red;
    }
</style>
<style>
  	.layui-form-label.required:after {
    
       /* 这种写法也可以*/
        content: ' *';
        color: red;
	}
</style>
<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label required">用户名</label>
      <div class="layui-input-inline">
        <input type="tel" name="username" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
</div>  

二十三、layer自适应问题

let dialog;

    function realTime() {
    
    
        let height = document.getElementsByClassName('layui-body')[0].clientHeight;
        let width = document.getElementsByClassName('contentAll')[0].clientWidth;

        dialog = layer.open({
    
    
            type: 2,
            area: [width, height], // 100%全屏
            shadeClose: false,
            shade: 0,
            scrollbar: false, // layer.open弹框弹出后父页面滚动问题
            title: '',
            closeBtn: false,
            offset: '60px',
            content: '../count/realTime.html?r=' + Math.random()
        });
    }

    function closeDialog() {
    
    
        layer.close(dialog);
    }

    // 监听浏览器的高度和宽度，重新渲染表格高度
    window.addEventListener('resize', function () {
    
    
        let height = document.getElementsByClassName('layui-body')[0].clientHeight;
        let width = document.getElementsByClassName('contentAll')[0].clientWidth;
        layer.style(dialog, {
    
    
            top: 0,
            width: width,
            height: height
        });
    });

二十四、layui的layer.open使用说明注意事项！！！

layer.open 参数----------

layer.open({
    
    
    // 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）
    type: 1,
    title: "标题",
    // 当type: 2时就是url
    content: "内容/url",
    // 宽高：如果是100%就是满屏
    area: ['733px', '450px'],
    // 坐标：auto（默认坐标，即垂直水平居中），具体当文档：https://www.layui.com/doc/modules/layer.html#offset
    offset: 'auto',
    // 按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推
    btn: ['按钮1', '按钮2'],
    // 关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0
    closeBtn: 1,
    // 遮罩：默认：0.3透明度的黑色背景（'#000'）
    shade: 0.3,
    // 是否点击遮罩关闭：默认：false
    shadeClose: false,
    // 自动关闭所需毫秒：默认：0不会自动关闭
    time: 0,
    // 最大最小化：默认：false
    maxmin: false,
    // 固定：默认：true
    fixed: true,
    // 是否允许拉伸：默认：true
    resize: true,
    // 层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突
    zIndex: 19891014,
    // 层弹出后的成功回调方法：layero前层DOM，index当前层索引
    success: function(layero, index){
    
    
    },
    // 第一个按钮事件，也可以叫btn1
    yes: function (index, layero) {
    
    
    },
    btn2: function (index, layero) {
    
    
        layer.close(index);
    },
    // 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
    cancel: function(index, layero){
    
    
        if(layer.confirm('确定要关闭么')){
    
     //只有当点击confirm框的确定时，该层才会关闭
            layer.close(index);
        }
        return false;
    },
    // 层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
    end: function(){
    
    
    },
    // 最大化后触发的回调：携带一个参数，即当前层DOM
    full: function(layero){
    
    
    },
    // 最小化后触发的回调：携带一个参数，即当前层DOM
    min: function(layero){
    
    
    },
    // 还原后触发的回调：携带一个参数，即当前层DOM
    restore: function(layero){
    
    
    },
});

layer.open 根据type不同，类型也就不一样,有五种类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）