Layer弹出层组件
概述
layer是layui的一部分
使用
layer.ready(callback)
作用：初始化就绪
由于layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。
当在页面一打开就要执行弹层时，最好方法是将弹层放入ready方法中（类似于window.onload）如：
<body>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面加载完后
// window.onload=function(){
// }
// $(function(){
// });
layer.ready(function(){
layer.msg("很高兴见到你")
});
</script>
</body>
绑定点击事件
和原生js类似，示例代码如下：
<body>
<button id="test1">欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件（按钮）
$('#test1').click(function(){
layer.msg("Hello Layer");
})
</script>
</body>
基础参数
我们提到的基础参数主要指调用方法时用到的配置项。
基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。
常见的如：
- content：弹出的内容
- time：弹窗时间
两者以键值形式存在,使用方法如：
layer.msg('Hello Layer',{time:4000})
layer.open(options)
作用：弹窗，是原始核心方法，是使用次数最高的方法。
格式：
var index = layer.open({
content: 'test'
//基础参数：值
});
返回值： 当前层索引
传入参数： js格式
最常用的基础参数：
| 名称 | 说明 |
|---|---|
| title | 弹窗的标题 |
| type | 弹窗的类型(因为open方法能弹出各种弹窗类型) |
| content | 弹窗里面显示的内容 |
| icon | 弹窗上面显示的图标 |
| time | 弹窗多久会自动关闭 |
| btn | 弹窗显示几个按钮 |
注意
- 不管是使用哪种方式创建层，都是走layer.open()。
type - 基本层类型
layer提供了5种层类型。
传入不同的值（Number类型），有不同的效果：
- 0（信息框，默认）
- 1（页面层）
- 2（iframe层 可以嵌套一个网页）
- 3（加载层）
- 4（tips层）
注意：
- 传入值默认为
0 - 采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
具体效果如下：
| 传输值 | 名称 | 效果 |
|---|---|---|
| 0 | 信息框 |  |
| 1 | 页面层 (传入任意的文本或html文件） |  |
| 2 | iframe层 可以嵌套一个网页（传入URL） |  |
| 3 | 加载层 |  |
| 4 | tips层 |  |
layer.close(index)
作用： 关闭特定层
关于它似乎没有太多介绍的必要，唯一让你疑惑的，可能就是这个index了吧。事实上它非常容易得到。
layer.alert()
作用：警告
layer.alert(); 等价于layer.open() type=0
格式：
index=layer.alert(content, [options], function())
注意：
- 它的参数是自动向左补齐的。
- 通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可。
效果：
样式代码1(方便理解)：
<body>
<button id="test1" >欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件（按钮）
$('#test1').click(function(){
var index=layer.alert(
'这是一个警告',
{icon:2},
function(){
layer.close(index)
}
)
})
</script>
</body>
样式代码2(常用风格)：
// 绑定点击事件（按钮）
$('#test1').click(function(){
layer.alert(
'这是一个警告',
{icon:2},
function(index){
layer.close(index)
}
)
})
layer.confirm
作用：询问框
格式：
layer.confirm(content, options, yes, cancel)
效果：
样式代码：
<body>
<button id="test1" >欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件（按钮）
$('#test1').click(function(){
layer.confirm(
'您确定要删除吗',
{icon:3,title:'提示'},
function(index){
layer.close(index)
}
)
})
</script>
</body>
content-内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
效果：
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="test1" >欢迎学习Layer</button>
<script src="js/jquery-3.6.2.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 绑定点击事件（按钮）
$('#test1').click(function(){
layer.open({
type:1,
area:['500px','300px'],
content:$('#divId')
})
})
</script>
</body>
<div id="divId" style="display:none;" >
姓名：<input type="text">
</div>
</html>
btn - 按钮
类型：String/Array，默认：'确认'
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。
1、当您只想自定义一个按钮时，你可以btn: '我知道了'，
2、当你要定义两个按钮时，你可以btn: ['yes', 'no']。
3、当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推
封装自己的layer库
为什么要封装自己的layer库
- 方便
- 减少重复代码
方法
layer使用场景
1、正确提示msg
2、错误提示msg
3、警告提示alert
4、确实提示confirm
5. 弹出页面open
