layui弹出层open的属性介绍

layui弹出层+open的属性介绍

Layui是一款前端UI框架，其弹出层+open功能非常强大，可以通过各种属性控制弹出层的外观和行为，本文将对open函数的常用属性进行介绍。

type

type属性决定了弹出层的类型，分为1和2，1表示普通弹出层，2表示最大化弹出层，如下示例：

  // 普通弹出层
  layer.open({
    type: 1,
    title: '普通弹出层',
    content: '普通弹出层的内容'
  });
  
  // 最大化弹出层
  layer.open({
    type: 2,
    title: '最大化弹出层',
    content: '最大化弹出层的内容'
  });

title

title属性用于设置弹出层的标题，如下示例：

  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '弹出层的内容'
  });

content

content属性用于设置弹出层的内容，可以是html字符串，也可以是DOM节点，如下示例：

  // html字符串
  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '
弹出层的内容
'
  });
  
  // DOM节点
  layer.open({
    type: 1,
    title: '弹出层标题',
    content: document.getElementById('layer-content')
  });

area

area属性用于设置弹出层的宽度和高度，可以是数字或字符串。当只设置一个值时，表示弹出层的宽度或高度，当设置两个值时，第一个值表示宽度，第二个值表示高度，如下示例：

  // 设置宽度为300px，高度自适应
  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '弹出层的内容',
    area: '300px'
  });
  
  // 设置宽度为300px，高度为200px
  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '弹出层的内容',
    area: ['300px', '200px']
  });

btn

btn属性用于设置弹出层底部的按钮组，按钮组是一个数组形式，每个按钮对象由两个属性组成，分别是按钮名称和事件处理函数。如下示例：

  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '弹出层的内容',
    btn: ['按钮名称', function(){
      console.log('按钮事件处理函数');
    }]
  });

shade

shade属性用于设置遮罩层的样式，可以是数字或字符串。当设置为true时，表示使用默认样式，当设置为false时，表示不显示遮罩层，当设置为数字或字符串时，表示使用自定义的样式。如下示例：

  // 使用默认样式
  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '弹出层内容',
    shade: true
  });
  
  // 不显示遮罩层
  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '弹出层内容',
    shade: false
  });
  
  // 使用自定义样式
  layer.open({
    type: 1,
    title: '弹出层标题',
    content: '弹出层内容',
    shade: [0.5, '#000']
  });

summary

在Layui中，弹出层是常用的交互方式，open函数则是最基本的打开弹出层的方式。其中type属性决定了弹出层的类型，title属性设置了弹出层的标题，content属性设置弹出层的内容，area属性用于设置弹出层的宽度和高度，btn属性用于设置弹出层底部的按钮组，shade属性用于设置遮罩层的样式。通过这些属性的组合，我们可以创建出不同样式和功能的弹出层，方便用户和后台交互。