layui中layer的使用

Posted 2020-10-05 麦兜家园

　　这两天写项目的时候用到layer，于是又把layui找出来看了看，layui确实是一个比较强大的前端框架，里面涵盖了很多的前端元素，而这对于前端的开发者来说是省了很大的麻烦，从一些页面元素到内置模块，都是采用了尽量少的代码来渲染页面，所以，我觉得自从用了layui就觉得对我的整个写项目过程中节省了不少时间。

　　今天就来说说关于layui里的layer的使用，主要提及的是pc端的用法，有时间再专门聊聊关于移动这一块的，其实应该都是大同小异。

　　layer说白了属于layui里的一个独立出来的弹层框架，但是由于近期layui在一直更新，所以现在的layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

一、引用场景不同　　

　　1、 作为独立组件使用：

　　如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。

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

　　2、 layui 模块化使用：

　　如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js

在 layui 中使用 layer
layui.use(\'layer\', function(){
  var layer = layui.layer;
  layer.msg(\'hello\');
});  

二、layer提供了不同的类型

　　layer提供了5种层类型。可传入的值有：

　　0（信息框，默认）；

　　1（页面层）；

　　2（iframe层）；

　　3（加载层）；

　　4（tips层）。

　　 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）。

三、关于layer里的内容分类

　　layer里的内容分类有：String，DOM和Array，默认：\'\'。当然，content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

　1、接下来我们看看在type为1（页面层）的时候，也就是关于页面层的引入content内容的不同写法：

 1 layer.open({
 2   type: 1, 
 3   content: \'传入任意的文本或html\' //这里content是一个普通的String
 4 });
 5 layer.open({
 6   type: 1,
 7   content: $(\'#id\') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
 8 });
 9 //Ajax获取
10 $.post(\'url\', {}, function(str){
11   layer.open({
12     type: 1,
13     content: str //注意，如果str是object，那么需要字符拼接。
14   });
15 });

在这里我要提醒各位的是，在type为页面层的时候layer的内容是没有array这个分类的写法的。
2、接下来我们看看在type为2（iframe层）的时候，也就是关于页面层的引入content内容的不同写法：

 1 // 如果是普通iframe层
 2 layer.open({
 3   type: 2, 
 4   content: \'http://sentsin.com\' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [\'http://sentsin.com\', \'no\']
 5 }); 
 6 
 7 //若iframe层-父子操作
 8 layer.open({
 9   type: 2,
10   area: [\'700px\', \'450px\'],
11   fixed: false, //不固定
12   maxmin: true,
13   content: \'test/iframe.html\'
14 });
15 
16 //若iframe层-多媒体
17 layer.open({
18   type: 2,
19   title: false,
20   area: [\'630px\', \'360px\'],
21   shade: 0.8,
22   closeBtn: 0,
23   shadeClose: true,
24   content: \'//player.youku.com/embed/XMjY3MzgzODg0\'
25 });
26 layer.msg(\'点击任意处关闭\');
27 
28 //弹出即全屏
29 var index = layer.open({
30   type: 2,
31   content: \'http://layim.layui.com\',
32   area: [\'320px\', \'195px\'],
33   maxmin: true
34 });
35 layer.full(index);

3、接下来我们看看在type为3（加载层）的时候，也就是关于页面层的引入content内容的不同写法：

 1     //加载层-默认风格
 2         layer.load();
 3         setTimeout(function(){
 4             layer.closeAll(\'loading\');
 5         }, 2000);
 6     //加载层-风格2
 7         layer.load(1);
 8         setTimeout(function(){
 9             layer.closeAll(\'loading\');
10         }, 2000);
11     //加载层-风格3
12         layer.load(2);
13         setTimeout(function(){
14             layer.closeAll(\'loading\');
15         }, 2000);
16     //加载层-风格4
17         layer.msg(\'加载中\', {
18             icon: 16
19             ,shade: 0.01
20         });

4、接下来我们看看在type为4（tips层）的时候，也就是关于页面层的引入content内容的不同写法：

 1 //tips层-上
 2 layer.tips(\'上\', \'#id或者.class\', {
 3   tips: [1, \'#0FA6D8\'] //还可配置颜色
 4   time: 4000
 5 });
 6 //tips层-右
 7 layer.tips(\'默认就是向右的\', \'#id或者.class\',{
 8     tips:[2, \'#0FA6D8\'],
 9     time:4000
10 });
11 //tips层-下
12 layer.tips(\'下\', \'#id或者.class\', {
13   tips: 3,
14   time:4000
15 });
16 //tips层-左
17 layer.tips(\'左边么么哒\', \'#id或者.class\', {
18   tips: [4, \'#78BA32\']
19 });

在这里我要提醒大家的是tips方法属于内置方法，因为用的较多，一直用open方法的话，会写太多的代码，比较反锁，所以，简单的说就是把tips专门封装成了一个方法，写起来比较简练，当然若是想用公共方法open来写也是可以的，接下来看一下用open来写的一种写法：

1 layer.open({
2             type: 4,
3             content: ["我是tips","#id或者.class"],
4             shade: 0,
5             tips: [1, \'#c00\'],
6             closeBtn: 0
7 
8   })

通过以上例子不难看出，tips里的1就是“上”，2就是“右”，3就是“下”，4就是“左”，切记没有0哦！

四、简单介绍一下layer里的其他基础参数

1、皮肤——skin

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。目前layer内置的skin有：layui-layer-lanlayui-layer-molv

 1 //内置的绿色
 2 layer.open({
 3             type: 1,
 4             shade: 0.3,
 5             tips: 1,
 6             closeBtn: 1,
 7             skin:\'layui-layer-molv\'
 8 
 9  });
10 //内置的蓝色
11 layer.open({
12             type: 1,
13             shade: 0.3,
14             tips: 1,
15             closeBtn: 1,
16             skin:\'layui-layer-molv\'
17 
18  });

以下是一个自定义风格的简单例子：

 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调试工具，定义更多样式控制层更多的区域。

 2、宽高——area

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

3、offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值

 

4、图标——icon

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。

1 //eg1，这里的icon可以传入0-6
2 layer.alert(\'酷毙了\', {icon: 1});
3 //eg2，这里的icon可以传入0-6
4 layer.msg(\'不开心。。\', {icon: 5});
5 //eg3，这里的icon可以传入0-2
6 layer.load(1); //风格1的加载

 

 5、关闭按钮——closeBtn

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0

6、遮罩层——shade

即弹层外区域。默认是0.3透明度的黑色背景（\'#000\'）。如果你想定义别的颜色，可以shade: [0.8, \'#393D49\']；如果你不想显示遮罩，可以shade: 0；如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

7、 自动关闭的时间——time

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

 好了，常用的也就这些了，希望能对大家有帮助，当然也算是对我了解的一个巩固。