正心全栈编程-文档站

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/");