Layui 弹出层组件——layer

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

基础参数：

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

1、type – 基本层类型

类型：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的不同而不同。比如：

 1 /!*
 2  如果是页面层
 3  */
 4 layer.open({
 5   type: 1, 
 6   content: \'传入任意的文本或html\' //这里content是一个普通的String
 7 });
 8 layer.open({
 9   type: 1,
10   content: $(\'#id\') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
11 });
12 //Ajax获取
13 $.post(\'url\', {}, function(str){
14   layer.open({
15     type: 1,
16     content: str //注意，如果str是object，那么需要字符拼接。
17   });
18 });
19 /!*
20  如果是iframe层
21  */
22 layer.open({
23   type: 2, 
24   content: \'http://sentsin.com\' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [\'http://sentsin.com\', \'no\']
25 }); 
26 /!*
27  如果是用layer.open执行tips层
28  */
29 layer.open({
30   type: 4,
31   content: [\'内容\', \'#id\'] //数组第二项即吸附元素选择器或者DOM
32 });

 

4、area – 宽高

类型：String/Array，默认：\’auto\’

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

5、maxWidth – 最大宽度

类型：，默认：360

请注意：只有当area: \’auto\’时，maxWidth的设定才有效。

版权声明：本文为shenxiaolin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/shenxiaolin/p/6306054.html