Layui 弹出层插件

蔚落 2022-01-22 03:05 435阅读 0赞

Layui 弹出层插件  
开发工具与关键技术： Visual Studio 2015 – Layui  
作者：廖亚星  
撰写时间：2019年 6 月4日

这段时间在做项目页面的搭建，在页面的操作中，会出现很多的弹出层，这能使用户在一个页面中执行更多的操作，而我的项目里面用的弹出层是Layui里面的弹出层插件。  
Layui的弹出层插件可以作为独立组件使用，也可以Layui模块化使用  
基本参数：  
type—基本层类型  
类型:Number  
Layer提供了5种层类型，传入的值为0(信息框,默认)、1(页面层) 、2(iframe层) 、3(加载层)  
4(tips层)  
title—标题  
类型：string/Array/Boolean，默认：信息  
title支持三种类型的值，若传入的是普通的字符串，如title :‘标题’，那么只会改变标题文本；若还需要自定义标题区域样式，那么可以title: \[‘文本’, ‘font-size:18px;’\]，数组第二项可以写任意css样式；如果不想显示标题栏，可以title: false  
content—内容  
类型：string/DOM/Array，默认“”  
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同  
area—宽高  
类型：String/Array，默认：‘auto’  
在默认状态下，layer是宽高都自动适应的，但想定义宽度时，可以area: ‘500px’，高度仍然是自适应的。当宽高都要定义时，可以area: \[‘500px’, ‘300px’\]来设置宽高的大小  
offset—坐标  
类型：String/Array，默认：垂直水平居中  
offset默认情况下不用设置。但如果不想垂直水平居中，还可以进行以下赋值：  
offset：‘auto’—垂直水平居中  
offset：‘100px’—只定义top坐标，水平保持居中  
offset：\[‘100px’,‘50px’\]—同时定义top,left坐标  
offset：‘t’—快捷键设置顶部坐标  
offset：‘lt’—快捷键设置左上角  
……  
closeBtn - 关闭按钮  
类型：String/Boolean，默认：1  
提供了两种风格的关闭按钮，可通过1和2来展示，如果不显示，则closeBtn: 0  
scrollbar - 是否允许浏览器出现滚动条  
类型：Boolean，默认：true  
默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽

下面有我做的一个弹出层–页面层  
首先引用Layui插件  
![在这里插入图片描述][20190604215429333.PNG]  
![在这里插入图片描述][20190604215436160.PNG]  
然后给它一个按钮，并在页面层里面设置内容  
![在这里插入图片描述][20190604215442310.PNG]  
按钮样式  
![在这里插入图片描述][20190604215448636.PNG]

下面给它点击事件，并设置好参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]  
里面宽高设置为430px/500px,标题名称为付款 结算，里顶部50px，不允许拉伸，content里面为内容ID  
点击后弹出层的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]

[20190604215429333.PNG]: /images/20220122/a63deca2014f4db9a60679fb9453767e.png
[20190604215436160.PNG]: /images/20220122/ee5e5de90787420c928ac44d3142bf8e.png
[20190604215442310.PNG]: /images/20220122/161cd00569c94ed7a8fd0018432fc941.png
[20190604215448636.PNG]: /images/20220122/664625e086bc48c3bcbc4c18950d82a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]: /images/20220122/ea033fd6ccab4c3fa0da47df7bffea2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]: /images/20220122/843d8ed6be914547bd5bedf006fde84f.png