六、扩展与定制
6.1 主题定制 - 使用 CSS 变量（新版特性）
很多开发者希望修改 LayUI 的默认主题色来匹配品牌风格。在 LayUI 2.8 及 3.0 版本中，官方添加了 CSS 变量支持，使得重置主题变得非常简单，无需再通过复杂的 Less 变量编译。
核心 CSS 变量列表：
在项目中定制主题：
/* 在全局样式表中覆盖 CSS 变量 */
:root {
--lay-color-primary: #4c6ef5; /* 修改主色为靛蓝 */
--lay-color-accent: #fa5252; /* 修改强调色为红色 */
--lay-border-radius: 8px; /* 增大圆角 */
--lay-font-family: "Inter", system-ui, sans-serif;
}
实现深色/浅色主题切换：
/* 定义两套主题变量 */
:root {
--lay-bg-color: #ffffff;
--lay-text-color: #333333;
--lay-border-color: #e9ecef;
}
:root.dark {
--lay-bg-color: #1a1a1a;
--lay-text-color: #e0e0e0;
--lay-border-color: #2c2c2c;
}
配合 JavaScript 动态切换：
// 切换主题函数
function toggleTheme() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('layui-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('layui-theme', 'dark');
}
}
// 页面加载时恢复用户选择的主题
const savedTheme = localStorage.getItem('layui-theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
}
6.2 移动端适配
LayUI 提供了专门的移动端（Mobile）版本，针对手机和平板设备进行了优化。移动端版本的核心区别如下：
移动端页面基础模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>移动端 LayUI 示例</title>
<link rel="stylesheet" href="/path/to/layui/css/layui.mobile.css">
</head>
<body>
<div class="layui-container">
<!-- 流式列表 -->
<ul class="layui-list">
<li class="layui-list-item">
<div class="layui-list-img">
<img src="avatar.jpg">
</div>
<div class="layui-list-text">
<h3>标题文字</h3>
<p>描述信息</p>
</div>
</li>
</ul>
</div>
<!-- 底部 Tabbar 导航栏 -->
<div class="layui-tabbar">
<ul class="layui-tabbar-list">
<li class="layui-tabbar-item layui-this">
<i class="layui-icon layui-icon-home"></i>
<span>首页</span>
</li>
<li class="layui-tabbar-item">
<i class="layui-icon layui-icon-find-fill"></i>
<span>发现</span>
</li>
<li class="layui-tabbar-item">
<i class="layui-icon layui-icon-user"></i>
<span>我的</span>
</li>
</ul>
</div>
<script src="/path/to/layui/layui.js"></script>
</body>
</html>
6.3 按需引入组件
LayUI 默认加载 layui.all.js 会包含所有内置模块，但这种方式会增加初始加载体积。对于对性能要求较高的项目，推荐按需引入：
// 方式一：配置模块路径并按需加载
layui.config({
base: '/static/js/modules/', // 自定义模块存放路径
version: true // 开启版本控制，避免缓存
}).use(['layer', 'form', 'table'], function(){
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
// 业务代码...
});
// 方式二：通过 extend 方法扩展自定义模块
layui.extend({
admin: '{/}/static/js/admin' // 扩展 admin 模块
}).use(['admin', 'layer'], function(){
var admin = layui.admin;
var layer = layui.layer;
// 使用扩展模块
});
使用 Vite 或 Webpack 按需打包（高级用法）：
// 在支持 tree-shaking 的构建工具中，可以只导入需要的组件
import layui from 'layui-src';
import 'layui-src/css/layui.css';
// 动态加载模块
layui.use(['layer', 'form'], () => {
// ...
});
6.4 自定义模块开发完整指南
LayUI 允许开发者使用 layui.define() 方法定义自己的模块，这对于封装复用的业务组件非常有用。以下是一个完整的自定义模块开发示例：
步骤一：定义模块
// modules/userManager.js
layui.define(['layer', 'form', 'upload'], function(exports){
var layer = layui.layer;
var form = layui.form;
var upload = layui.upload;
// 私有变量和方法
var apiBaseUrl = '/api/user';
var currentUser = null;
function fetchUserList(callback) {
$.get(apiBaseUrl + '/list', function(res){
callback(res.data);
});
}
function showUserDetail(userId) {
$.get(apiBaseUrl + '/' + userId, function(user){
layer.open({
type: 1,
title: '用户详情',
content: `
<div style="padding: 20px;">
<p>姓名：${user.name}</p>
<p>邮箱：${user.email}</p>
<p>角色：${user.role}</p>
</div>
`,
area: ['400px', '300px']
});
});
}
// 公开 API
var api = {
// 获取用户列表
getList: function(callback) {
fetchUserList(callback);
},
// 显示用户详情
showDetail: function(userId) {
showUserDetail(userId);
},
// 打开新增用户弹窗
openAddDialog: function(callback) {
layer.open({
type: 2,
title: '新增用户',
content: '/page/user/add',
area: ['600px', '500px'],
end: function() {
if (callback) callback();
}
});
},
// 删除用户
deleteUser: function(userId, successCallback) {
layer.confirm('确定删除该用户吗？', {
icon: 3,
title: '提示'
}, function(index){
layer.close(index);
$.ajax({
url: apiBaseUrl + '/' + userId,
type: 'DELETE',
success: function(){
layer.msg('删除成功');
if (successCallback) successCallback();
}
});
});
}
};
// 输出模块接口
exports('userManager', api);
});
步骤二：在页面中使用自定义模块
<script>
layui.config({
base: '/static/js/modules/' // 设置自定义模块的根目录
}).use(['userManager', 'table'], function(){
var userManager = layui.userManager;
var table = layui.table;
// 使用自定义模块的方法
userManager.getList(function(users){
console.log('用户列表：', users);
});
// 删除用户
userManager.deleteUser(123, function(){
table.reload('userTable');
});
});
</script>
6.5 第三方插件集成
LayUI 的模块化设计使得集成第三方插件变得非常简单。以下是一些常见的集成场景：
集成 ECharts：
// 1. 引入 ECharts CDN
// 2. 在 LayUI 中使用
layui.use(['element'], function(){
var element = layui.element;
// 初始化 ECharts 图表
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption({
title: { text: '数据趋势' },
xAxis: { data: ['Mon', 'Tue', 'Wed'] },
yAxis: {},
series: [{ type: 'line', data: [120, 200, 150] }]
});
});
封装 ECharts 为 LayUI 模块：
// modules/echarts.js
layui.define(function(exports){
var echarts = window.echarts;
if (!echarts) {
console.error('请先引入 ECharts 库');
return;
}
var api = {
init: function(domId, option) {
var dom = document.getElementById(domId);
if (!dom) return null;
var chart = echarts.init(dom);
chart.setOption(option);
return chart;
},
resize: function(chart) {
chart && chart.resize();
}
};
exports('echarts', api);
});
// 使用封装后的模块
layui.use(['echarts'], function(){
var echarts = layui.echarts;
var chart = echarts.init('chartBox', {
xAxis: { data: ['A', 'B', 'C'] },
yAxis: {},
series: [{ type: 'bar', data: [10, 20, 30] }]
});
});
总结
LayUI 以其极低的学习门槛、丰富的组件库和独特的模块化设计，在广大后端开发者及中小型项目团队中占据了独特的地位。虽然在前端工程化大行其道的今天，LayUI 可能不是构建大型复杂单页面应用的首选，但它在快速构建后台管理系统、内部运营平台、传统企业官网等方面依然具有极高的效率优势。特别是随着 3.0 版本的发布，LayUI 正努力向现代化标准靠拢，试图在“返璞归真”与“紧跟时代”之间找到完美的平衡点。
来源：
https://rvtst.cn
