四、基础元素与视觉
4.1 按钮
LayUI 的按钮样式丰富，只需为 button、a 等元素添加 layui-btn 类即可，同时支持多种尺寸和主题色。
<!-- 基础按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
<!-- 不同尺寸 -->
<button class="layui-btn layui-btn-lg">大型按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</button>
<button class="layui-btn layui-btn-xs">迷你按钮</button>
<!-- 圆角按钮 -->
<button class="layui-btn layui-btn-radius">圆角按钮</button>
<!-- 流体按钮（占满父容器宽度） -->
<button class="layui-btn layui-btn-fluid">流体按钮</button>
<!-- 图标按钮 -->
<button class="layui-btn">
<i class="layui-icon layui-icon-home"></i> 首页
</button>
<!-- 按钮组 -->
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">编辑</button>
<button class="layui-btn">删除</button>
</div>
4.2 图标
LayUI 内置了大量图标（LayUI 2.8 版本后新增了 18 个），使用 layui-icon 类即可调用。图标采用字体方式渲染，可以随意改变颜色和大小。
<!-- 基础图标 -->
<i class="layui-icon layui-icon-face-smile"></i>
<!-- 带文字的图标链接 -->
<a href="javascript:;" class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-delete"></i> 删除
</a>
<!-- 调整图标大小（通过 CSS） -->
<i class="layui-icon layui-icon-home" style="font-size: 30px; color: #16baaa;"></i>
4.3 表单
表单是后台管理系统中的核心元素。LayUI 的表单模块 form 负责管理输入框、下拉框、单选框、复选框和开关等组件。重要提示：所有表单项必须放在具有 class="layui-form" 的容器内，否则样式和事件将不生效。
<form class="layui-form" action="">
<!-- 输入框 -->
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required"
placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 开关 -->
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭">
</div>
</div>
<!-- 下拉框（带搜索） -->
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-block">
<select name="city" lay-search>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
</select>
</div>
</div>
<!-- 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
layui.use(['form'], function(){
var form = layui.form;
// 监听提交事件
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false; // 阻止页面跳转
});
});
</script>
表单验证：LayUI 内置了 lay-verify 属性用于表单验证，常见值有 required（必填）、phone（手机号）、email（邮箱）、url（网址）等。
五、核心交互模块详解
LayUI 的 JavaScript 模块是其灵魂所在，赋予了静态页面强大的动态交互能力。
5.1 弹出层 Layer
layer 被誉为 LayUI 最经典的模块，几乎是弹窗解决方案的首选。它不仅功能强大，而且使用极其简单。
// 基础消息框
layer.msg('操作成功', {icon: 1, time: 2000});
// 确认框
layer.confirm('确定要删除这条数据吗？', {
icon: 3,
title: '提示',
btn: ['确定', '取消']
}, function(index){
layer.close(index);
layer.msg('删除成功');
}, function(index){
layer.close(index);
});
// 加载层
var index = layer.load(1, { shade: [0.3, '#000'] });
setTimeout(function(){
layer.close(index);
layer.msg('加载完成');
}, 2000);
// iframe弹窗
layer.open({
type: 2,
title: '编辑用户',
area: ['700px', '450px'],
content: '/page/edit-user?id=123',
end: function(){
location.reload();
}
});
5.2 数据表格 Table
table 模块是 LayUI 处理数据展示的核心，支持动态渲染、分页、排序、筛选、行内编辑等复杂功能。
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url: '/api/data',
toolbar: '#toolbarDemo',
cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: 'ID', width:80, sort: true},
{field: 'username', title: '用户名', width:120},
{field: 'email', title: '邮箱', width:200},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]],
page: true,
limit: 20
});
});
5.3 日期时间选择器 Laydate
laydate 模块提供了强大的日期时间选择功能，支持单选、区间选择、自定义格式等。
layui.use('laydate', function(){
var laydate = layui.laydate;
// 基础日期选择
laydate.render({ elem: '#test1' });
// 时间选择器
laydate.render({ elem: '#test2', type: 'time' });
// 日期时间范围选择
laydate.render({ elem: '#test3', type: 'datetime', range: true });
// 年选择器
laydate.render({ elem: '#test4', type: 'year', format: 'yyyy年' });
});
5.4 文件上传 Upload
upload 模块提供了丰富的文件上传方案，支持多文件、拖拽上传、图片预览等。
layui.use('upload', function(){
var upload = layui.upload;
upload.render({
elem: '#test1',
url: '/api/upload/',
accept: 'image',
done: function(res){
layer.msg('上传成功');
$('#demo1').attr('src', res.url);
},
error: function(){
layer.msg('上传失败');
}
});
});
