Layer——弹出层

Layer——弹出层

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年5月16 日

Layui.layer弹层组件文档，layer是layui的代表作，也只是作为layui的一个弹层模块。Layer可以作为独立组件来使用，也可以通过layui模块化使用，至于使用哪一种
可以按照实际的需求选择，不过文档都要以本页为主。

两种使用方法的使用语法以及效果实例如下，

作为独立组件使用 layer：

独立使用:layer.msg(‘单 独使用’,{icon:1, skin:“layui-layer-molv” });

在layui中使用 layer：

在layui中使用layer

             layui.use('layer', function () {

               var layer = layui.layer;

              layer.msg('模块化使用',{ icon: 0, skin: "layui-layer-molv" });

             });

基础参数:

这里所提到的基础参数主要指调用方法时用到的配置项，如：

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

Layui.layer弹层组件文档里面有多个弹出层，下面使用了三种，见代码截图如下：

前两种的简析与用法请看前面的说明，layer .tab(options)-tab层说明以及其他弹层相关说明如下。

layer.tab(options) – tab层：

下tab层只单独指定了一个成员，即弹出tab独立层面。可以给tab层设置页面的宽高，给里面的每个滑动页面设置标题、输入不同的内容。Tab层的实现效果如，

layer.msg(content, options, end) - 提示框

提示框的使用率是非常高的，因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失，它有许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。

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

icon - 图标。信息框和加载层的私有参数：

类型：Number，默认：-1（信息框）/0（加载层）

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

area - 宽高

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

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

skin - 样式类名

类型：String，默认：’’

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子

content - 内容

类型：String/DOM/Array，默认：’’

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。