正心全栈编程-文档站

Appearance

弹出层 ​

https://layui.dev/docs/2.8/layer/

弹出层组件 layer 是 Layui 最古老的组件，也是使用覆盖面最广泛的代表性组件。 在实现网页弹出层的首选交互方案，使用的非常频繁。

打开弹层 ​

layer.open(options);

  • 参数 options : 基础属性配置项。

打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装。

js
// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
var index = layer.open({
    type: 1, // page 层类型，其他类型详见「基础属性」
    content: '<div style="padding: 16px;">test</div>'
});

基础属性 ​

属性名描述类型默认值
type弹层类型。 可选值有：
0 dialog 信息框（默认）, 同时只能存在一个层
1 page 页面层，可同时存在多个层
2 iframe 内联框架层，可同时存在多个层
3 loading 加载层，同时只能存在一个层
4 tips 贴士层，可配置同时存在多个层
layer 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，layer 提供的所有的弹出方式均由此衍生。		number0
title弹层标题。其值支持以下可选类型：
1. 若为 string 类型 : 则表示为弹层的标题文本，如：title: '标题'
2.若为 array 类型 : 则可设置标题文本和标题栏 CSS 样式：title: ['标题', 'font-size: 18px;']
3.若为 boolean 类型 : 则可设为 false 不显示标题栏。title: false // 不显示标题栏		string、array、boolean信息
content弹层内容。 可传入的值比较灵活，支持以下使用场景：
1. 若 type: 1（页面层）: 则 content 可传入 文本 、 HTML、 DOM 元素、 jQuery 对象
2. 若 type: 2（iframe 层）: 则 content 可传入 URL
3. 若为其他弹层类型，传入普通字符即可。
area设置弹层的宽高，其值支持以下可选类型：
1. 若为 array 类型，则可同时设置宽高
area: ['520px', '320px'] 固定宽度和高度
area: ['auto', '320px'] 宽度自动，高度固定
area: ['520px', 'auto'] 宽度固定，高度自动
2. 若为 string 类型，则可定义宽度和宽高均自适应：
area: '520px'宽度固定，高度自适应
area: 'auto' 宽度和高度均自适应

更多属性，参考： https://layui.dev/docs/2.8/layer/#options

警告

layui.open 是最重要的方法，尤其是基础属性设置。因为官网内容实在太多，并且用法很多，推荐直接看官方文档。复制粘贴调试一下，就能很快上手。

page 层 ​

1、普通页面层

js
layer.open({
    type: 1,
    // area: ['420px', '240px'], // 宽高
    content: '<div style="padding: 16px;">任意 HTML 内容</div>'
});

2、捕获层

html

<div id="ID-test-layer-wrapper" style="display: none;">
    <div style="padding:16px;">
        弹出已经存在于页面中的一段元素<br>
        通常是放置在 `body` 根节点下
    </div>
</div>
js
layer.open({
    type: 1,
    shade: false, // 不显示遮罩
    content: $('#ID-test-layer-wrapper'), // 捕获的元素
    end: function () {
        // layer.msg('关闭后的回调', {icon:6});
    }
});

3、剔除默认标题栏

js
layer.open({
    type: 1,
    area: ['420px', '240px'], // 宽高
    title: false, // 不显示标题栏
    closeBtn: 0,
    shadeClose: true, // 点击遮罩关闭层
    content: `<div style="padding: 16px;">任意 HTML 内容。可点击遮罩区域关闭。</div>`
});

4、弹出自定义内容

js
layui.use(function () {
        let $ = layui.$
        let form = layui.form
        let layer = layui.layer
        layer.open({
            type: 1,
            area: '350px',
            resize: false,
            shadeClose: true,
            title: 'demo : layer + form',
            content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                  </div>
                  <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                  </div>
                  <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-row">
                  <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-vercode"></i>
                      </div>
                      <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                  </div>
                  <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                      <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-form-item">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
              </div>
              <div class="layui-form-item demo-login-other">
                <label>社交账号登录</label>
                <span style="padding: 0 21px 0 6px;">
                  <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                  <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                  <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                </span>
                或 <a href="#reg">注册帐号</a></span>
              </div>
            </div>
          </div>
        `,
            success: function () {
                // 对弹层中的表单进行初始化渲染
                form.render();
                // 表单提交事件
                form.on('submit(demo-login)', function (data) {
                    var field = data.field; // 获取表单字段值
                    // 显示填写结果，仅作演示用
                    layer.alert(JSON.stringify(field), {
                        title: '当前填写的字段值'
                    });
                    // 此处可执行 Ajax 等操作
                    // …
                    return false; // 阻止默认 form 跳转
                });
            }
        });
    },
)
js
layer.open({
    type: 1,
    area: ['420px', '240px'], // 宽高
    title: false,
    content: ['<div style="padding: 11px;">',
        '任意 HTML 内容',
        '<div style="padding: 16px 0;">',
        '<button class="layui-btn" id="ID-test-layer-move">拖拽此处移动弹层</button>',
        '</div>',
        '</div>'].join(''),
    move: '#ID-test-layer-move'
});

iframe 层 ​

1、iframe 的父子操作

html

<script>
    layui.use(function () {
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;

        layer.open({
            type: 2,
            area: ['680px', '520px'],
            content: '/iframe',
            fixed: false, // 不固定
            maxmin: true,
            shadeClose: true,
            btn: ['获取表单值', '取消'],
            btnAlign: 'c',
            yes: function (index, layero) {
                // 获取 iframe 的窗口对象
                var iframeWin = window[layero.find('iframe')[0]['name']];
                console.log(iframeWin);
                var elemMark = iframeWin.$('input'); // 获得 iframe 中某个输入框元素
                var value = elemMark.val();

                if ($.trim(value) === '') return elemMark.focus();
                // 显示获得的值
                layer.msg('获得 iframe 中的输入框标记值：' + value);
            }
        });
    })
</script>

iframe 子页

html
<!--iframe.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iframe html</title>
    <link href="/static/css/layui.css" rel="stylesheet">
</head>
<body>
<script src="/static/layui.js"></script>

<input type="text" name="" placeholder="文本输入框" class="layui-input">
<script src="/static/layui.js"></script>
<script>
    layui.use(function () {
        var $ = layui.$;
        var layer = layui.layer;
        window.$ = $
    })
</script>
</body>
</html>

2、禁止滚动

js
 layer.open({
    type: 2,
    area: ['360px', '500px'],
    skin: 'layui-layer-rim', // 加上边框
    content: ['iframe', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
});

3、任意 url

js
 layer.open({
    type: 2,
    title: 'iframe 任意 URL',
    shadeClose: true,
    maxmin: true, //开启最大化最小化按钮
    area: ['900px', '600px'],
    content: 'https://notes.zhengxinonly.com/'
});

对话框（dialog） ​

layer.msg 消息提示 ​

layer.msg(content, options, end);

  • 参数 content : 弹出内容
  • 参数 options : 基础属性配置项。
  • 参数 end : 提示框关闭后的回调函数

该方法用于弹出 dialog 类型提示框（type: 0），默认 3 秒后自动关闭。参数自动向左补位。

html

<script>
    layui.use(function () {
                let $ = layui.$
                let layer = layui.layer
                layer.msg('消息提示框');
            },
    )
</script>

案例：

js
// 案例 1
layer.msg('普通提示');
// 案例 2
layer.msg('带 icon 的提示', {icon: 6});
// 案例 3
layer.msg('关闭后想做些什么', function () {
    console.log('do something')
});
// 案例 4
layer.msg('提示框', {
    icon: 1,
    time: 2000 // 设置 2 秒后自动关闭，默认是3秒
}, function () {
    console.log('do something')
});

layer.confirm 弹出询问框 ​

layer.confirm(content, options, yes, cancel);

  • 参数 content : 弹出内容

  • 参数 options : 基础属性配置项。#详见属性

  • 参数 yes : 点击确定后的回调函数

  • 参数 cancel : 点击第二个按钮（默认「取消」）后的回调函数

  • 该方法用于弹出 dialog 类型询问框（type: 0），参数自动向左补位。

html

<script>
    layui.use(function () {
                let $ = layui.$
                let layer = layui.layer
                layer.confirm('一个询问框的示例？', {icon: 3}, function () {
                    layer.msg('点击确定的回调', {icon: 1});
                }, function () {
                    layer.msg('点击取消的回调');
                });
            },
    )
</script>

案例：

js
// 案例
layer.confirm('确定吗?', {icon: 3, title: '提示'}, function (index) {
    // do something
    // …
    layer.close(index);  // 取认回调，关闭窗口
});

layer.alert 弹出信息框 ​

layer.alert(content, options, yes);

  • 参数 content : 弹出内容

  • 参数 options : 基础属性配置项。#详见属性

  • 参数 yes : 点击确定后的回调函数

  • 该方法用于弹出 dialog 类型信息框（type: 0），参数自动向左补位。

js
// eg1
layer.alert('一个简单的信息框');
// eg2
layer.alert('开启图标', {icon: 1}, function (index) {
    // do something
    // …
    layer.close(index);
});
// eg3
layer.alert('不开启图标', function (index) {
    // do something
    // …
    layer.close(index);
});

加载层 ​

layer.load 弹出加载层 ​

layer.load(icon, options);

  • 参数 icon : 加载图标风格，支持 0-2 可选值
  • 参数 options : 基础属性配置项。

该方法用于弹出 load 类型加载层（type: 3）。

js
// eg1
var index = layer.load(); // 默认加载图标风格
// eg2
var index = layer.load(1); // 加载图标风格 1
// eg3
var index = layer.load(2, {time: 10 * 1000}); // 加载图标风格，并设置最长等待 10 秒

// 关闭加载层
layer.close(index);

layer.tips 弹出贴士层 ​

layer.tips(content, elem, options);

  • 参数 content : 弹出内容
  • 参数 elem : 吸附的目标元素选择器或对象
  • 参数 options : 基础属性配置项。#详见属性

该方法用于弹出 tips 类型贴士层（type: 4），默认 3 秒后自动关闭。

html

<body>
<script src="/static/layui.js"></script>

<div class="layui-btn" id="id" style="margin: 100px">按钮</div>

<script>
    layui.use(function () {
                let $ = layui.$
                let layer = layui.layer
                layer.tips('小贴士', '#id');
            },
    )
</script>
</body>

案例：

js
// eg1
layer.tips('小贴士', '#id');
// eg2
$('#id').on('click', function () {
    var elem = this;
    layer.tips('小贴士', elem); // 在元素的事件回调体中，follow直接赋予this即可
});
// eg3
layer.tips('显示在目标元素上方', '#id', {
    tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
});

关闭弹层 ​

layer.close 关闭弹层 ​

layer.close(index);

  • 参数 index : 打开弹层时返回的唯一索引

该方法用于关闭对应的弹层。

js
// 每一种弹层调用方式，都会返回一个 index
var index1 = layer.open();
var index2 = layer.alert();
var index3 = layer.load();
var index4 = layer.tips();
// 关闭对应的弹层
layer.close(index1);

在 iframe 弹层页面中关闭自身

js
var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
parent.layer.close(index); // 再执行关闭

layer.closeAll 关闭所有层 ​

layer.closeAll(type);

  • 参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips

该方法用于关闭所有同类型的弹层。

js
layer.closeAll(); // 关闭所有类型的层
layer.closeAll('dialog'); // 关闭所有的信息框
layer.closeAll('page'); // 关闭所有的页面层
layer.closeAll('iframe'); // 关闭所有的 iframe 层
layer.closeAll('loading'); // 关闭所有的加载层
layer.closeAll('tips'); // 关闭所有的 tips 层

关闭最近一次打开的层 ​

layer.closeLast(type);

  • 参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips

该方法用于关闭最近一次打开的对应类型的层。

js
layer.closeLast('dialog'); // 关闭最近一次打开的信息框
layer.closeLast('page'); // 关闭最近一次打开的页面层
layer.closeLast('iframe'); // 关闭最近一次打开的 iframe 层
layer.closeLast('loading'); // 关闭最近一次打开的加载层
layer.closeLast('tips'); // 关闭最近一次打开的 tips 层

iframe ​

获取 iframe 页中的元素 ​

layer.getChildFrame(selector, index);

  • 参数 selector : iframe 子页面的选择器或元素对象
  • 参数 index : 打开弹层时返回的唯一索引

该方法用于在父页面获取 iframe 子页面中的元素

html
<!--filename: index.html-->
<body>
<script src="/static/layui.js"></script>
<script>
    layui.use(function () {
                let $ = layui.$
                let layer = layui.layer
                layer.open({
                    type: 2, // iframe 层
                    content: '/iframe',
                    success: function (layero, index) {
                        // 获取 iframe 中 body 元素的 jQuery 对象
                        var body = layer.getChildFrame('body', index);
                        // 给 iframe 页中的某个输入框赋值
                        body.find('input').val('Hello layer.');
                    }
                });
            },
    )
</script>
</body>
html
<!--iframe.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iframe html</title>
    <link href="/static/css/layui.css" rel="stylesheet">
</head>
<body>
<script src="/static/layui.js"></script>

<input type="text" name="" placeholder="文本输入框" class="layui-input">

</body>
</html>

在 iframe 页中获取弹层索引 ​

layer.getFrameIndex(window.name);

  • 参数 window.name : 当前 iframe 窗口的 name 属性值

该方法用于在 iframe 页面内部获取当前 iframe 弹层的索引，以便关闭自身。

js
var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
parent.layer.close(index); // 关闭当前 iframe 弹层

设置 iframe 层高度自适应 ​

layer.iframeAuto(index);

  • 参数 index : 打开弹层时返回的唯一索引

该方法可让 iframe 高度跟随内容自适应

js
layer.open({
    type: 2, // iframe 层
    content: '/iframe',
    area: '600px', // 弹层初始宽度
    success: function (layero, index, that) {
        layer.iframeAuto(index); // 让 iframe 高度自适应
        that.offset(); // 重新自适应弹层坐标
    }
});

重新设置 iframe 层 URL ​

layer.iframeSrc(index, url);

  • 参数 index : 打开弹层时返回的唯一索引
  • 参数 url : URL 地址
js
// 打开弹层
var index = layer.open({
    type: 2, // iframe 层
    content: '/iframe'
});
// 重置 iframe 页面 URL
layer.iframeSrc(index, 'https://cn.bing.com/');