LayUI基础入门

LayUI

核心基础：安装与模块加载

环境部署关键

​ 安装地址：https://www.layui.com

• 必须引入两个核心文件：layui.css（样式）和 layui.js（核心库），非模块化场景可替换为 layui.all.js
• 目录结构需完整保留，尤其是 css/modules、lay/modules 等核心模块目录，避免组件失效

模块加载规则

• 采用 layui.use(['模块名'], callback) 语法加载所需模块，未加载的模块无法调用其功能

<script src="layui/layui.js"></script>
<script>// 模块和回调函数// 一般直接写在一个js文件中layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');});
</script>

• 常用依赖模块：导航 / 选项卡依赖 element、表单依赖 form、弹出层依赖 layer、日期选择依赖 laydate

布局系统：栅格与容器

容器使用要点

• 固定宽度容器：class="layui-container"，适配大屏设备，列布局可控
• 自适应宽度容器：class="layui-fluid"，宽度 100% 适配，无固定尺寸限制

栅格系统核心规则

• 基础结构：行（layui-row）包含列（layui-col-md*），列基于 12 等分设计。
• 响应式标记：支持 xs（手机）、sm（平板）、md（中等桌面）、lg（大屏桌面）四类屏幕，列类名格式为 layui-col-[标记]-[等分数]
• 关键特性：
  • 列间距：通过 layui-col-space[数值] 设置（1-30px），需嵌套内层 div 实现视觉间距效果
  • 列偏移：layui-col-[标记]-offset[等分数]，偏移列数不超过 12，小屏会堆叠
  • 列嵌套：在列元素内嵌套 layui-row 即可实现多层布局，无层级限制

核心组件：配置与使用难点

按钮

名称	组合
原始	class=“layui-btn layui-btn-primary”
默认	class=“layui-btn”
百搭	class=“layui-btn layui-btn-normal”
暖色	class=“layui-btn layui-btn-warm”
警告	class=“layui-btn layui-btn-danger”
禁用	class=“layui-btn layui-btn-disabled”

<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button>
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button><!--设置圆角-->
layui-btn-radius
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button><!--设置图标-->
<button type="button" class="layui-btn">
<i class="layui-icon">&#xe608;</i> 添加</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">&#x1002;</i> 刷新</button

表单组件

• 必须外层包裹 class="layui-form"，否则样式和验证功能失效
• 特殊元素配置：
  • 开关：通过 lay-skin="switch" 实现，lay-text 自定义开关文本（格式：“开 | 关”）
  • 复选框 / 单选框：lay-skin="primary" 切换原始风格，title 自定义文本，未设置则仅显示控件
  • 下拉框：lay-search 开启搜索功能，optgroup 实现选项分组
• 表单验证：依赖 form 模块，通过 lay-verify 绑定验证规则（如 required 为必填）

弹出层（layer）

• 两种使用场景：独立使用需引入 jQuery 和 layer.js；LayUI 模块化使用无需额外引入，直接加载 layer 模块
• 核心参数：
  • type：控制层类型（0 = 信息框、1 = 页面层、2=iframe 层、3 = 加载层、4=tips 层）
  • content：支持文本、HTML 片段或 URL（iframe 层）
  • area：控制宽高，格式为 ['宽度', '高度']，单个值仅控制宽度
• 交互回调：yes 对应确认按钮事件，success 为层加载成功回调

日期与时间选择

• 渲染方式：通过 laydate.render({elem: '元素选择器'}) 绑定元素，必填 elem 参数

  类型控制：type 可选 year（年）、month（年月）、date（日期）、time（时间）、datetime（日期时间）

• 格式自定义：format 参数支持组合格式符（如 yyyy年MM月dd日 HH:mm:ss），需与 value 初始值格式一致

表格

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起使用
lay-skin=“属性值”	line（行边框风格）row（列边框风格）nob（无边框风格）	若使用默认风格不设置该属性即可
lay-size=“属性值”	sm（小尺寸）lg（大尺寸）	若使用默认尺寸不设置该属性即可

<table class="layui-table"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr></thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody>
</table>

导航与选项卡

• 依赖 element 模块，未加载则无法实现展开、切换等功能
• 导航类型：
  • 水平导航：class="layui-nav"
  • 垂直导航：追加 layui-nav-tree
  • 侧边导航：追加 layui-nav-tree layui-nav-side
  • 面包屑：layui-breadcrumb
• 选项卡：lay-allowClose="true" 开启关闭功能，简洁风格追加 layui-tab-brief，卡片风格追加 layui-tab-card

常见问题与注意事项

1. 样式失效：检查核心文件路径是否正确，模块是否加载，容器类名是否完整（如表单需 layui-form）
2. 列间距无效：layui-col-space 本质是内边距，需在列内嵌套内层 div 并设置背景色
3. 组件无交互：确认依赖模块已加载（如导航依赖 element）