弹层组件layer的使用

最新推荐文章于 2020-09-27 09:12:46 发布

plutocc

最新推荐文章于 2020-09-27 09:12:46 发布

阅读量635

点赞数

本文链接：https://blog.csdn.net/bystarf/article/details/102852384

版权

layer是前端ui框架layui的弹层组件，可以单独使用也可以通过Layui模块化使用。
之前自己的项目中一直用aler弹窗，灵活性很差，并且不美观，因此准备单独引入layer做为项目弹框独立插件

操作步骤

首先是去layer独立版官网下载组件包。地址： http://layer.layui.com/

2.下载解压完成后将整个layer文件夹引入项目任意目录中，并将layer.js 引入html文件中。不能单独引入layer.js,否则弹窗加载不到样式图片等资源，layer需要jQuery1.8以上版本的支持

之后就可以直接在js代码中使用弹窗，效果如下

在open方法中可以设置一些参数来个性化弹窗样式，其中’content‘可以设置为一个dom对象，弹窗内容就会显示该对象所对应的html文本，例如：

function importProc()
    {
        layer.open({
            type: 1,
            area: ['420px', '250px'], //宽高
            title: '导入',
            content: $('#importProcLayer'),
            zIndex:1900,
            shade:0
        });
    }

在这里插入图片描述
如图选取id属性为importProcLayer的div作为弹窗内容，并将其样式设置为隐藏。

layer 还可以弹出tips提示框，可用做输入错误的提示，如下示例：

layer.tips('请输入正整数','#pageSize',{tips:[1,'#666666']});

效果：
在这里插入图片描述
其中 pageSize为输入框值 1 代表提示框向上弹出，(同理 234代表右下左) #666666代表背景色。

layer 也可以弹出疑问提示框，可以添加不同按钮，对应不同的回调函数。示例如下：

layer.confirm('确定删除吗？', {
                    btn: ['确定','取消'], //按钮
                    closeBtn: 0,
                    zIndex:1900
                }, function(){
				alert("ok");
                    
        });

效果：
在这里插入图片描述
其中 closeBtn: 0 表示不显示提示框右上角的关闭按钮，zindex表示提示框叠加顺序，点击确定会调用function()。要注意该回调函数是异步执行，若后续还有其他
操作需要注意调用顺序问题。