使用layui的一些常用扩展代码

置顶 liu_bees

已于 2023-07-10 12:50:23 修改

阅读量469

点赞数 1

分类专栏： # LayUI相关经验文章标签： layui 前端框架常用扩展代码 layui扩展代码

于 2019-12-18 16:06:10 首次发布

本文链接：https://blog.csdn.net/qq_26599807/article/details/103599574

版权

LayUI相关经验专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用layui的一些常用扩展代码

最近做项目发现layui一些常用的扩展代码，谨记以下：

1. 页面加载中：

	var index = layer.msg('加载中，请稍后。。。', {
	    icon : 16,
	    shade : 0.3,
	    time: 0
	});
	layer.close(index);

2. 页面初始化方法：

	function jvc_main(isLoadPage) {
		if (typeof (form) == 'undefined') {
			setTimeout("jvc_main()", 400);
			return;
		}
		//xxxxxx
	}

3. 返回异常提示：

	var msg = j ? j.message : null;
	layer.msg(msg ? msg : "获取XX信息失败！", {
		icon : 5
	});

4. 确定保存吗？

特别注意：这里confirm按钮回调是异步的，可能会并发！！！（这里的layerConfirmBln 解决并发问题）

	var layerConfirmBln = false;
	layer.confirm('确定保存吗？', {
		btn : [ '确定', '我再想想' ]
	}, function() {
		if(layerConfirmBln) return;
		layerConfirmBln = true;
		//form.submit();
	}, function() {
		layer.close(index);
	});

5. 日期插件-选择HHmm格式的时间：

.layui-laydate-main {
	width: 220px !important;
}
.laydate-time-list>li:last-child {
	display: none;
	width: 0;
}
.laydate-time-list>li:not(:last-child ) {
	width: 50%;
}
.layui-laydate-header {
	padding: 10px 10px 5px;
}

6. 下拉框获取text：

	form.on('select(cityCode)', function(data) {
		console.log(data);
		data.text = this.innerText;
	});

7. 查看图片：

layer.open({
	 type: 1,
	  title :false,
	  area: ['680px', '510px'], //宽高
	  content: '<img src="./minew/images/store_expire.png"/>',
	  btn:false,
	  shade :0.8,
	  scrollbar :false,
	  zIndex :99999999
});

8. layui table不分页，全部展示：

	page : false,
	limit: Number.MAX_VALUE // 数据表格默认全部显示

7. xxx：

	xxxx

八、常用加载方法：

layui.use([ 'form', 'table', 'layer', 'util' ], function() {
	window.form = layui.form;
	window.table = layui.table;
	window.layer = layui.layer;

	layui.util.fixbar();
});