天天看点

Layui 弹出层组件——layer

     layer是作为layui【经典模块化前端框架】的一个弹层模块,由于其用户基数较大,所以把layer作为独立组件来维护。

基础参数:

  基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,我们不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。

1、type - 基本层类型

<dl><dd></dd></dl>

类型:number,默认:0

layer提供了5种层类型。可传入的值有:0(信息框,默认),1(页面层),2(iframe层),3(加载层),4(tips层)。 若采用的是 layer.open({type: 1}) 方式调用,则type为必填项(信息框除外)

2、title - 标题

类型:string/array/boolean,默认:'信息'

title支持三种类型的值,

若传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;

若还需要自定义标题区域样式,那么可以写title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;

若不想显示标题栏,可以t写 title: false

3、content - 内容

       类型:string/dom/array,默认:''

       content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定dom,更可以随着type的不同而不同。比如:

4、area - 宽高

类型:string/array,默认:'auto'

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,可以area: ['500px', '300px']

5、maxwidth - 最大宽度

类型:,默认:360

请注意:只有当area: 'auto'时,maxwidth的设定才有效。