layui.layer

layui.layer
开发工具与关键技术：VS layui
作者：木林森
撰写时间：2019年 6 月 13 日
在许多的Web网站中都会用到弹层组件，今天就来和大家探讨一下如今国内最热门的Web弹层组件——layer。
Layer是layui体系中的重要组成部分，因为它位置比较特殊，导致很多人误以为layui=layui ui，其实并非如此，这里需要说明一下，layer其实只作为layui的一个弹层模块，但是因为layer用户基数较大，为了方便使用，layer就作为了独立的组件来维护。所以layer就有两种不同的使用场景——layer独立使用和layer通过layui模块化使用，用户可以根据自身的需求来选择。下面将会单独介绍layer的两种使用场景。

Layer独立使用：如果layer作为独立组件来使用的话，那么我们就需要找到layer独立版本官网去下载组件包，并且需要在页面中引入jQuery 1.8以上的任意版本和layer.js。准备好插件调用就行，调用的方式也比较简单。就通过script标签引入在body或head内就行。
例子如下：
代码图1 效果图2

Layer通过layui模块化使用：如果你使用的是layui，那么你只需要在官网下载框架就行，不需要引用jQuery和layer.js，但是需要引入layui,css和layui.js。这里调用的方式有点不同，你引入插件后需要在script标签内通过layui.use(‘layer’.’callback’) 来加载模块。
例子如下：
代码图3 效果图4

虽然layer有两种不同的使用场景，但是他们除了以上的不同之处外，它还用很多的相同之处，如常使用的以下几点：

1. 基础参数：它以键值的形式存在，可以合理的应用于任何类型中，大都可选无需配置，其中layer.open、layer.msg是常用的内置方法；
2. 基本层类型（Type）：layer提供了五种常用的类型，它可以输入的值是0-4，每个数字代表了不同的层类型：0—默认值，信息框；1—页面层；2—iframe层；3—加载层；4—tips层。这里需要注意一下，如果你使用的是layer.open({type: 1})，那此时的type为必填项（信息框除外）。
3. 标题（title）：标题有些时候有提示的作用，有些时候又不需要用到标题，这里如果不需要使用的话，就可以写title：false，那么你的标题将不出现。如果需要就写title：‘自定义标题名’，那么你的标题名字就会是你自定义好的名字。如果你需要多样式的标题，你可以这样设置title:[‘抽血报告’,’font-size:20px;’]。注意：如果你不对标题进行设置，那么它将会显示标题为‘信息’；
4. 内容（content）：内容在这里是灵活多变的，不仅可以传入普通的Html，还可以指定DOM，甚至还可以随着type的不同而不同，请看例子（图5）：
   
   图5
   以上的内容参考于layui离线手册，如果理解错了请多指教，建议想了解layer的伙伴，请自行去layui正规网站浏览。