前端ui框架layui——layer弹出层-基础参数

最新推荐文章于 2025-01-20 06:40:21 发布

原创最新推荐文章于 2025-01-20 06:40:21 发布 · 2.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

layui 专栏收录该内容

4 篇文章

订阅专栏

本文主要介绍了layui框架中layer弹出层的基础参数，包括type、title、content、area、offset等30个参数的详细说明，帮助开发者理解和使用layer创建各种弹出效果。

layer官网介绍：

layer 至今仍作为 layui 的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer已成为国内最多人使用的 Web 弹层组件，GitHub 自然Stars5000+，官网累计下载量达50w+，大概有30万不同规模的 Web 平台使用过 layer。 

之所以列举上面这些数字，并非是在夸夸其谈，而是懂 layer 的人都知道，这是一种怎样不易的沉淀。而由于 layer 在 layui 体系中的位置比较特殊，甚至让很多人都误以为 layui = layer ui，所以再次强调 layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。不过请注意：无论是独立的 layer，还是作为内置模块的 layer，文档都以本页为准。

首先，在layui中使用模块话layer，需要通过layui.use('layer', callback)加载模块：

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

下面，我们开始正式说一下layer的内容。

——————————————基础参数—————————————

詳細內容參考layui官方文檔。http://www.layui.com/doc/modules/layer.html

1.type - 基本层类型类型：Number，默认：0

2.title - 标题类型：String/Array/Boolean，默认：'信息'

3.content - 内容类型：String/DOM/Array，默认：''

4.area - 宽高类型：String/Array，默认：'auto'

5.offset - 坐标类型：String/Array，默认：垂直水平居中

6.btn - 按钮类型：String/Array，默认：'确认'

7.icon - 图标。信息框和加载层的私有参数类型：Number，默认：-1（信息框）/0（加载层）

8.btnAlign - 按钮排列类型：String，默认：r

9.closeBtn - 关闭按钮类型：String/Boolean，默认：1

10.shade - 遮罩类型：String/Array/Boolean，默认：0.3

11.shadeClose - 是否点击遮罩关闭类型：Boolean，默认：false

12.time - 自动关闭所需毫秒类型：Number，默认：0

13.id - 用于控制弹层唯一标识类型：String，默认：空字符

14.anim - 弹出动画类型：Number，默认：0

15.isOutAnim - 关闭动画类型：Boolean，默认：true

16.maxmin - 最大最小化。类型：Boolean，默认：false

17.fixed - 固定类型：Boolean，默认：true

18.resize - 是否允许拉伸类型：Boolean，默认：true

19.resizing - 监听窗口拉伸动作类型：Function，默认：null

20.scrollbar - 是否允许浏览器出现滚动条类型：Boolean，默认：true

21.maxWidth - 最大宽度类型：Number，默认：360

22.maxHeight - 最大高度类型：Number，默认：无

23.zIndex - 层叠顺序类型：，默认：19891014（贤心生日 0.0）

24.move - 触发拖动的元素类型：String/DOM/Boolean，默认：'.layui-layer-title'

25.moveOut - 是否允许拖拽到窗口外类型：Boolean，默认：false

26.moveEnd - 拖动完毕后的回调方法类型：Function，默认：null

27.tips - tips方向和颜色类型：Number/Array，默认：2

28.tipsMore - 是否允许多个tips 类型：Boolean，默认：false

29.success - 层弹出后的成功回调方法类型：Function，默认：null

30.yes - 确定按钮回调方法类型：Function，默认：null

31.cancel - 右上角关闭按钮触发的回调类型：Function，默认：null

32.end - 层销毁后触发的回调类型：Function，默认：null

33.full/min/restore -分别代表最大化、最小化、还原后触发的回调类型：Function，默认：null