lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-10-07 23:24:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
Files
752301c27119313b62b9e41107dffd62fedee526
layui/docs/layer/detail/options.md

16 KiB
Raw Blame History

属性名 描述 类型 默认值
type

弹层类型。 可选值有：

  • 0 dialog 信息框（默认），同时只能存在一个层
  • 1 page 页面层，可同时存在多个层
  • 2 iframe 内联框架层，可同时存在多个层
  • 3 loading 加载层，同时只能存在一个层
  • 4 tips 贴士层，可配置同时存在多个层

layer 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，layer 提供的所有的弹出方式均由此衍生。

 number

0
title

弹层标题。其值支持以下可选类型：

  • 若为 string 类型 : 则表示为弹层的标题文本，如：
title: '标题'
  • 若为 array 类型 : 则可设置标题文本和标题栏 CSS 样式：
 title: ['标题', 'font-size: 18px;']
  • 若为 boolean 类型 : 则可设为 false 不显示标题栏。
title: false // 不显示标题栏
string
array
boolean

信息

content

弹层内容。 可传入的值比较灵活，支持以下使用场景：

  • 若 type: 1（页面层）: 则 content 可传入值如下：
// 普通字符
layer.open({
  type: 1, 
  content: '传入任意文本或 HTML'
});
// 捕获页面已存在的 DOM 元素或 jQuery 对象
layer.open({
  type: 1,
  content: $('#id') // 捕获层
});

注意： 若采用捕获层，则捕获的元素必须存放在 <body> 根节点下，否则可能被父级容器的相对定位所影响。

  • 若 type: 2（iframe 层）: 则 content 可传入值如下：
// iframe URL
layer.open({
  type: 2, 
  content: 'http://cn.bing.com' // URL
}); 
// 是否屏蔽 iframe 滚动条
layer.open({
  type: 2, 
  // 数组第二个成员设为 no，即屏蔽 iframe 滚动条
  content: ['http://cn.bing.com', 'yes']
});
  • 若为其他弹层类型，传入普通字符即可。

相关效果可参考：#示例

area
设置弹层的宽高，其值支持以下可选类型：
  • 若为 array 类型，则可同时设置宽高
    • area: ['520px', '320px'] 固定宽度和高度
    • area: ['auto', '320px'] 宽度自动，高度固定
    • area: ['520px', 'auto'] 宽度固定，高度自动
  • 若为 string 类型，则可定义宽度和宽高均自适应：
    • area: '520px' 宽度固定，高度自适应
    • area: 'auto' 宽度和高度均自适应
 array
string

auto
maxWidth

弹层的最大宽度。当 area 属性设置宽度自适应时有效。

 number

360
maxHeight

弹层的最大高度。当 area 属性设置高度自适应时有效。

 number -

offset
弹层的偏移坐标。 支持以下可选值：
  • offset: 'auto' 坐标始终垂直水平居中
  • offset: '16px' 只设置垂直坐标，水平保持居中
  • offset: ['16px', '16px'] 设置垂直和水平坐标
  • offset: 't' 上边缘
  • offset: 'r' 右边缘
  • offset: 'b' 下边缘
  • offset: 'l' 左边缘
  • offset: 'rt' 右上角
  • offset: 'rb' 右下角
  • offset: 'lt' 左上角
  • offset: 'lb' 左下角

当设置边缘坐标时，可配合 anim 属性实现抽屉弹出效果。

 string
array

auto

anim
弹层的出场动画。支持以下可选值：
  • anim: 0 平滑放大。默认
  • anim: 1 从上掉落
  • anim: 2 从最底部往上滑入
  • anim: 3 从左滑入
  • anim: 4 从左翻滚
  • anim: 5 渐显
  • anim: 6 抖动

边缘抽屉动画 2.8+：

  • anim: 'slideDown' 从上边缘往下
  • anim: 'slideLeft' 从右边缘往左
  • anim: 'slideUp' 从下边缘往上
  • anim: 'slideRight' 从左边缘往右

抽屉动画一般配合 offset 属性实现边缘弹出。#详见示例

 number
string

0
isOutAnim

是否开启弹层关闭时的动画。

 boolean

true
maxmin

是否开启标题栏的最大化和最小化图标。

 boolean

false

closeBtn
是否开启标题栏的关闭图标，或设置关闭图标风格。
  • closeBtn: 0 不显示关闭图标
  • closeBtn: 1 关闭图标默认风格
  • closeBtn: 2 关闭图标风格二
 number

1

icon
提示图标。 信息框和加载层的私有参数。
  • 若为信息框，支持传入 0-6 的可选值。
    默认为 -1，即不显示图标。
  • 若为加载层，支持传入 0-2 的可选值
// eg1
layer.alert('成功提示', {icon: 1});

// eg2
layer.msg('开心表情', {icon: 6});

// eg3
layer.load(1); // 加载层风格一
number

-1

btn
自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如： 
// eg1       
layer.confirm('询问框？', {
  btn: ['按钮1', '按钮2', '按钮3']
});
// eg2
layer.open({
  content: 'test',
  btn: ['按钮1', '按钮2', '按钮3'],
  // 按钮1 的回调
  btn1: function(index, layero, that){},
  btn2: function(index, layero, that){
    // 按钮2 的回调
    // return false // 点击该按钮后不关闭弹层
  },
  btn3: function(index, layero, that){
    // 按钮3 的回调
    // return false // 点击该按钮后不关闭弹层
  }
});
string -

btnAlign
按钮水平对其方式。支持以下可选值：
  • btnAlign: 'l' 按钮左对齐
  • btnAlign: 'c' 按钮水平居中对齐
  • btnAlign: 'r' 按钮右对齐。默认值，不用设置
 string

r

btnAsync 2.9.12+

异步按钮。开启之后，除 layer.prompt 的按钮外，按钮回调的返回值将支持 boolean | Promise<boolean> | JQueryDeferred<boolean> 类型，返回 false 或 Promise.reject 时阻止关闭。

注意，此时 yes 和 btn1(两者等效) 回调的默认行为发生了变化，即由触发时不关闭弹层变为关闭弹层。

var sleep = function (time) {
  return $.Deferred(function (defer) {
    setTimeout(function () {
      defer.resolve();
    }, time)
  })
}
// 下面以 confirm 层为例
layer.confirm('一个询问框的示例？', {
    btnAsync: true,
    btn: ['确定', '关闭'] // 按钮
  }, 
  function (index, layero, that) {
    var defer = $.Deferred();
    // 注: that.loading() 仅 btnAsync 开启后支持，参数为 boolean 类型，表示打开或关闭按钮的加载效果。
    that.loading(true);
    sleep(1000).then(defer.resolve);
    return defer.promise();
  }
);
boolean

false

skin
弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
  • layui-layer-molv 墨绿主题
  • layui-layer-lan 深蓝主题
  • layui-layer-win10 Windows 10 主题 2.8+

还可传入其他任意 className 来自定义主题。 参考：#示例

 string -

shade
弹层的遮罩。 支持以下写法：
  • shade: 0.3 设置遮罩深色背景的透明度
  • shade: [0.3, '#FFF'] 设置遮罩透明度和颜色值
  • shade: 0 不显示遮罩
 number
array

0.3
shadeClose

是否点击遮罩时关闭弹层。当遮罩存在时有效。

 boolean

false
id

弹层的唯一索引值。 一般用于页面层或 iframe 层弹出时的状态识别，设置该属性可防止弹层的重复弹出。

 string -
hideOnClose 2.8.3+

关闭弹层时，是否将弹层设置为隐藏状态（而非移除），当再次打开，直接显示原来的弹层。 若设为 true，则必须同时设置 id 属性方可有效。

 boolean

false
time

弹层自动关闭所需的毫秒数。 如 time: 3000 ，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。

 number

0
fixed

弹层是否固定定位，即始终显示在页面可视区域。

 boolean

true
zIndex

弹层的初始层叠顺序值。

 number

19891014
resize

是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。

 boolean

true
scrollbar

打开弹层时，是否允许浏览器出现滚动条。

 boolean

true
minStack 2.6+

点击标题栏的最小化时，是否从页面左下角堆叠排列。

 boolean

true
removeFocus 2.8+

是否移除弹层触发元素的焦点，避免按回车键时重复弹出。

 boolean

true
move

绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 move: false 禁止拖拽。 用法参考：#示例

 string
DOM
boolean		 -
moveOut

否允许拖拽到窗口外

 boolean

false
tips

设置 tips 层的吸附位置和背景色，tips 层的私有属性。

  • 若为 number 类型，则支持 1-4 的可选值，分别代表上右下左的吸附位置。如： tips: 1
  • 若为 array 类型，则支持设置吸附位置和背景色，如：
tips: [1, '#000'] // 吸附在上的深色贴士层
number
array

2
tipsMore

是否允许同时存在多个 tips 层，即不销毁上一个 tips。

 boolean

false

回调函数

success
打开弹层成功后的回调函数。返回的参数如下： 
layer.open({
  type: 1,
  content: '内容',
  success: function(layero, index, that){
    // 弹层的最外层元素的 jQuery 对象
    console.log(layero);
    // 弹层的索引值
    console.log(index);
    // 弹层内部原型链中的 this --- 2.8+
    console.log(that);
  }
});

yes

点击「确定」按钮的回调函数。返回的参数同 success

layer.open({
  content: '内容',
  yes: function(index, layero, that){
    // do something
    layer.close(index); // 关闭弹层
  }
});

cancel
点击标题栏关闭按钮的回调函数。返回的参数同 `success` 
layer.open({
  content: '内容',
  cancel: function(index, layero, that){
    if(confirm('确定要关闭么')){
      layer.close(index);
    }
    return false; // 阻止默认关闭行为
  }
});

beforeEnd 2.9.11+
弹层被关闭前的回调函数。如果返回 false 或者 Promise.reject，将会取消关闭操作。 
layer.open({
  content: '<div style="padding: 32px;"><input id="id"/></div>',
  /** @type {(layero: JQuery, index: number) => boolean | JQueryDeferred<boolean> | Promise<boolean>} */
  beforeEnd: function(layero, index, that){
    return $.Deferred(function(defer){
      var el = layero.find('#id');
      var val = el.val().trim();
      if(val){
        layer.confirm('关闭后您填写的内容将不会得到保存，确定关闭吗？', function (i) {
          layer.close(i);
          defer.resolve(true)
        });
      }else{
        defer.resolve(true)
      }
    }).promise();
  }
});

end
弹层被关闭且销毁后的回调函数。 
layer.open({
  content: '内容',
  end: function(){
    console.log('弹层已被移除');
  }
});

moveEnd
弹层拖拽完毕后的回调函数。 
layer.open({
  type: 1,
  content: '内容',
  moveEnd: function(layero){
    console.log('拖拽完毕');
  }
});

resizing
弹层拉伸过程中的回调函数 
layer.open({
  type: 1,
  content: '内容',
  resizing: function(layero){
    console.log('拉伸中');
  }
});

full

弹层最大化后的回调函数。返回的参数同 success

layer.open({
  type: 1,
  content: '内容',
  full: function(layero, index, that){
    console.log('弹层已最大化');
  }
});

min

弹层最小化后的回调函数。返回的参数同 success

layer.open({
  type: 1,
  content: '内容',
  min: function(layero, index, that){
    // do something
    // return false; // 阻止默认最小化
  }
});

restore
弹层被还原后的回调函数。返回的参数同 `success` 
layer.open({
  type: 1,
  content: '内容',
  restore: function(layero, index, that){
    console.log('弹层已还原');
  }
});