王新阳

layui.prompt 监听回车键来触发确认操作

layer.prompt({
	title: '请输入密码：',
	formType: 1,
	success: function(layero, index){
		$(layero).find('.layui-layer-input').prop('autocomplete','new-password').on('keydown',function(e){
			if(e.which === 13){
				$(layero).find('.layui-layer-btn0').trigger('click');
			}
		});
	},
	yes: function(index, layero){
		let elem=$(layero).find('.layui-layer-input'), value=elem.val();
		if(value==='123456'){
			layer.close(index);
			layer.msg('密码正确');
		}else{
			elem.focus();
			layer.tips(value===''?'请输入':'密码错误',elem,{tips:1,time:2e3});
		}
	}
});

传统prompt方法无法监听输入

layer.prompt({
	title: '请输入密码：',
	formType: 1,
},function(value, index, elem){
	console.log(value);
	layer.close(index);
});

2025-10-23

回应

layui多图带预览的上传

<div class="layui-form-item">
	<label class="layui-form-label">图片上传</label>
	<div class="layui-input-block">
		<button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="js-btn-upload"><i class="layui-icon layui-icon-upload"></i> 上传图片</button>
	</div>
</div>
<div class="layui-form-item">
	<ul id="upload-list" class="upload-list"></ul>
</div>

<script type="text/html" id="upload-tpl">
	<li id="js-image-{{ d.index }}">
		<div class="layui-progress" lay-filter="progress-{{ d.index }}"><div class="layui-progress-bar" lay-percent=""></div></div>
		<em><img src="{{ d.url }}"><a class="layui-btn layui-btn-xs layui-bg-red js-reupload">重新上传</a></em>
		<div class="layui-btn-group">
			<a class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue js-left"><i class="layui-icon layui-icon-left"></i></a>
			<a class="layui-btn layui-btn-primary layui-btn-sm layui-border-red js-delete"><i class="layui-icon layui-icon-delete"></i></a>
			<a class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue js-right"><i class="layui-icon layui-icon-right"></i></a>
		</div>
		<input type="hidden" name="imglist[]">
	</li>
</script>

<script>
//上传图片
var uploadInst = layui.upload.render({
	elem: '#js-btn-upload', //绑定元素
	elemList: $('#upload-list'), // 列表元素对象
	url: '<?=site_url('kindeditor/uploadjson?type=image&dir=product')?>',
	acceptMime: 'image/jpeg, image/png',
	exts: 'jpg|png',
	size: 1024,
	field: 'imgFile',
	multiple: true,
	number: 6,
	auto: false,
	choose: function(obj){
		uploadInst.config.elem.next()[0].value = ''; 
		var pics=this.elemList.find('li').length;
		if(pics>=this.number || pics+Object.keys(obj.getChooseFiles()).length>this.number){
			layer.msg('最多上传6张图片');
			return false;
		}
		// 读取本地文件
		var that = this;
		obj.preview(function(index, file, result){
			var li=$(laytpl($('#upload-tpl').html()).render({index:index,url:result}));
			li.find('.layui-progress').show();
			li.find('.js-reupload').on('click', function(){
				obj.upload(index, file);
				$(this).hide();
				element.progress('progress-'+ index, '0%');
			});
			that.elemList.append(li);
			element.render('progress'); // 渲染新加的进度条组件
			obj.upload(index, file);
		});
	},
	done: function(res, index, upload){ // 成功的回调
		var that = this;
		 if(res.error == 0){ // 上传成功
			var li = that.elemList.find('li#js-image-'+ index)
			li.find('.layui-progress').remove();
			li.find('input').val(res.url);
			return;
		}
		this.error(index, upload);
	},
	error: function(index, upload){ // 错误回调
		var that = this;
		var li = that.elemList.find('li#js-image-'+ index);
		 //显示重传
		li.find('.js-reupload').show();
		layer.msg('上传失败',{icon:5});
	},
	progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
		element.progress('progress-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
	}
});
</script>

2025-09-21

回应

layui表单中label宽度自适应

@media(min-width:451px){
	.layui-form-item{display:flex;align-items:center;}
	.layui-form-label{flex:0 0 auto;width:auto !important;min-width:120px;}
	.layui-form-pane .layui-input-block{flex:1;margin-left:-1px;}
}

效果如下图：

2025-08-15

回应

layui.layer宽度自适应

maxWidth当area属性为auto时有效

layer.open({
	skin: 'layui-layer-admin',
	title:"弹层标题",
	type: 1,
	maxmin: true,
	area: ['auto','90%'],
	maxWidth:1200,
	shadeClose: true,
	content: html
});

设置百分比宽度，打开弹层后重置最大宽度（高度）和位置，实现宽度自适应

layer.open({
	skin: 'layui-layer-admin',
	title:'标题',
	type: 1,
	maxmin: true,
	area: ['90%','90%'],
	shadeClose: true,
	content: html,
	success:function(layero,index,that){
		layer.style(index,{maxWidth:1200});
		//layer.style(index,{maxWidth:1200, maxHeight:800});
		that.offset();
	}
});

高度自适应

layer.open({
	skin: 'layui-layer-admin',
	title:'标题',
	type: 1,
	maxmin: true,
	area: ['90%','90%'],
	shadeClose: true,
	content: html,
	success:function(layero,index,that){
		layer.iframeAuto(index); // 让 iframe 高度自适应
		that.offset();
	}
});

2024-08-03

回应

layui自动触发select事件

来源：https://toscode.gitee.com/layui/layui/issues/I5JMRW

$(obj).siblings("div.layui-form-select").find("dl dd[lay-value='"+value+"']").click();

2023-05-09

回应

layui特殊方法

在新标签页中打开：

top.layui.index.openTabsPage(url,title);

关闭当前标签页：

window.top.layui.jquery('body').find('#LAY_app_tabs .layui-this .layui-tab-close').trigger('click');

Layui Admin中关闭当前标签页：

parent.layui.admin.events.closeThisTabs();

在layer.open打开的iframe中关闭自己：

parent.layer.close(parent.layer.getFrameIndex(window.name));

头部工具栏

table.render({
	toolbar: '#demoBar', //开启头部工具栏
	defaultToolbar: ['filter','print','exports'], //默认工具栏
});

获取表格全部数据

//方法1：包含接口返回的原始数据和组件内部的特定字段
table.cache[table_id];
//方法2：只包含接口返回的原始数据
table.getData(table_id);

2021-11-11

回应

layui插件

layui官方文档
https://layui.gitee.io/v2/

layui镜像网站
http://laizhefa.com/
https://www.layui.site/

treetable
https://gitee.com/ele-admin/treetable-lay
演示地址：https://whvse.gitee.io/treetable-lay/demo/
开发文档：https://gitee.com/whvse/treetable-lay/wikis/pages

layui mini后台管理模板
http://layuimini.99php.cn/

EasyAdmin后台管理系统 ThinkPHP6.0+layUI
http://easyadmin.99php.cn/

OPtable
http://hbangmao.gitee.io/layui-op-table/demo/index.html

soul table
https://saodiyang.gitee.io/layui-soul-table/

Dtree
https://www.wisdomelon.com/DTreeHelper/

xmSelect
https://maplemei.gitee.io/xm-select/

TableSelect
https://gitee.com/lolicode/layui_component_tableselect

2021-07-23

回应