layui中layer自力组件详解WEB前端开发

edu83

layer至今仍作为layui的代表作，她的受众普遍并不是偶然，而是这五年多的对峙，不停完善和保护、不停建立和提拔社区服务，使得猿们纷纭自觉流传，乃至于成为本日的Layui最强劲的源动力。

现在，layer已成为国内最多人运用的web弹层组件，GitHub天然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在运用layer。

运用场景：

因为layer能够自力运用，也能够经由过程Layui模块化运用。所以请根据你的现实需求来挑选

layer至今仍作为layui的代表作，她的受众普遍并不是偶然，而是这五年多的对峙，不停完善和保护、不停建立和提拔社区服务，使得猿们纷纭自觉流传，乃至于成为本日的Layui最强劲的源动力。

现在，layer已成为国内最多人运用的web弹层组件，GitHub天然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在运用layer。

运用场景：

因为layer能够自力运用，也能够经由过程Layui模块化运用。所以请根据你的现实需求来挑选

1、作为自力组件运用layer

1. 引入好layer.js后，直接用即可
   
2. <script src="layer.js"></script>
   
3. <script>
   
4. 　　layer.msg('hello');
   
5. </script>

复制代码

2、在layui中运用layer

1. layui.use('layer', function(){
   
2.   var layer = layui.layer;
   
3.   layer.msg('hello');
   
4. });

复制代码

除了上面有所差别，别的都完全一致。

基础参数：

我们提到的基础参数主要指挪用要领时用到的设置项，如：layer.open({content: ''})layer.msg('', {time: 3})等，个中的content和time等于基础参数，以键值情势存在，基础参数可合理应用于任何层范例中，您不须要一切都去设置，大多数都是可选的。而个中的layer.open、layer.msg就是内置要领。注重，从2.3入手下手，无需经由过程layer.config来加载拓展模块

type - 基础层范例

范例：Number，默许：0

layer供应了5种层范例。可传入的值有：0（信息框，默许）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采纳layer.open({type: 1})体式格局挪用，则type为必填项（信息框除外）

title - 标题

范例：String/Array/Boolean，默许：'信息'

title支撑三种范例的值，若你传入的是平常的字符串，如title :'我是标题'，那末只会转变标题文本；若你还须要自定义标题地区款式，那末你能够title: ['文本', 'font-size:18px;']，数组第二项能够写恣意css款式；假如你不想显现标题栏，你能够title: false

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. });

复制代码

skin - 款式类名

范例：String，默许：''

skin不仅许可你传入layer内置的款式class名，还能够传入您自定义的class名。这是一个很好的切入点，意味着你能够借助skin轻松完成差别的作风定制。

现在layer内置的skin有：layui-layer-lanlayui-layer-molv，将来我们还会挑选性地内置更多，但更引荐您本身来定义。以下是一个自定义作风的简朴例子

1. //单个运用
   
2. layer.open({
   
3.   skin: 'demo-class'
   
4. });
   
5. //全局运用。即一切弹出层都默许采纳，然则单个设置skin的优先级更高
   
6. layer.config({
   
7.   skin: 'demo-class'
   
8. })
   
9. //CSS
   
10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
    
11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
    
12. body .demo-class .layui-layer-btn a{background:#333;}
    
13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
    
14. …
    
15. 加上body是为了保证优先级。你能够借助Chrome调试东西，定义更多款式掌握层更多的地区。

复制代码

area - 宽高

范例：String/Array，默许：'auto'

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

offset - 坐标
范例：String/Array，默许：垂直程度居中
icon - 图标。信息框和加载层的私有参数

范例：Number，默许：-1（信息框）/0（加载层）

信息框默许不显现图标。当你想显现图标时，默许皮肤能够传入0-6假如是加载层，能够传入0-2。如：

1. //eg1
   
2. layer.alert('酷了', {icon: 1});
   
3. //eg2
   
4. layer.msg('不高兴。。', {icon: 5});
   
5. //eg3
   
6. layer.load(1); //作风1的加载

复制代码