vue elementui 穿梭框

转载

mob64ca140f29e5 2024-10-14 23:41:30

文章标签 vue elementui 穿梭框 javascript 前端 html layui 文章分类 机器学习人工智能

一、layui nav 菜单栏默认收缩

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二十、[layui穿梭框右侧增加上移下移功能](https://www.freesion.com/article/9804310203/)

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

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

二十三、layer自适应问题

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

一、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"改变颜色

vue elementui 穿梭框_html

三、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穿梭框右侧增加上移下移功能

vue elementui 穿梭框_layui_02

<!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层）

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。