前端笔记html-layer使用-CSDN博客

本文链接：https://blog.csdn.net/qq_44695727/article/details/132022195

确认框

layer.confirm('您确定需要操作吗?', {
  icon: 5,
  title: '提示'
}, function(index) {
  // 当用户点击确认按钮时，执行这里的代码
  // 你可以在这里添加你的导出逻辑

  // 使用index关闭弹出框
  layer.close(index);
});

layer.open方法

    layer.open({
        type:2, //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        title: title,
        content:['url?id=' + id,'no'],  // url请求地址返回页面, no->yes显示进度条
        area:['650px','585px'],
        btn: ['确定', '取消'],
        yes: function(index, layero){
            var iframeWin = window[layero.find('iframe')[0]['name']];
            // view方法在弹窗中实现
            // iframeWin.view();
            // 关闭自身弹窗
            // layer.close(index);
        },
        btnAlign:'c'
    });

父页面获取layer.open弹窗中的值

1、获取input中的值

content页面

<div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px">
    <div class="input-group">
        <input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"
            onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" />
    </div>
</div>

父页面

layer.open({
    type:1,
    title:"选择时间",
        content:'    <div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px">\n' +
            '        <div class="input-group">\n' +
            '            <input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"\n' +
            '                   onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" />\n' +
            '        </div>\n' +
            '    </div>',
        area:['250px','200px'],
        btn: ['确定', '取消'],
    btnAlign:'c',
    yes:(index,layero)=>{
            var kjMonth = $('[name=kjMonth]').val();
            console.log(kjMonth);
    },
    cancel:(index, layero)=>{}
})

2、获取select中选中的值

网上看到的，顺便记录下

content页面

<select id="groupId" name="groupId" xm-select="group">
      <span th:each="info : ${groupList}">
<option th:text="${info.name}" th:value="${info.id}"></option>
      </span>
  </select>

父页面

layer.open({
    type: 2,
    title: "标题",
    area: ['600px', '500px'],
    content: "/page/layerOpen", //请求后端返回页面地址
    btn: ['提交', '取消'],
    yes: function(index, layero){
        //得到iframe页的窗口对象，执行iframe页的方法：
        var iframeWin = window[layero.find('iframe')[0]['name']];
        // 获取页面中xm-select属性为group的下拉选择框选中的值
        var selectGroupData = iframeWin.layui.formSelects.value('group', 'val');
        console.log(selectGroupData);

        // 或
        var kjMonth = $('[name=groupId]').val();
    }
})

layer设置显示位置

设置显示位置可以通过offset进行设置，

设置代码：

    layer.open({
                type: 2, 
                  content: "content.html",
                 offset:"rb"
            })

后续待更新..