代码拉取完成,页面将自动刷新
V2版本相比于V1,核心代码进行重构,更加更加规范,配置使用起来也更方便。
多模块
和单模块
之间的切换,接口的初始化数据还是一样的。api/init.json
,以适配单模块的切换。以下参数是
miniAdmin.render();
初始化时进行传入。
参数 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
iniUrl | 初始化接口 | string | null | 实际使用,请对接后端接口动态生成,格式请参考文件:api/init.json
|
clearUrl | 缓存清理接口 | string | null | 实际使用,请对接后端接口动态生成,格式请参考文件:api/init.json
|
renderPageVersion | 初始化页面是否加版本号 | bool | false | 开启后,页面不会有缓存问题 |
bgColorDefault | 主题默认配置 | int | 0 | 如需添加更多主题信息,请在js/lay-module/layuimini/miniTheme.js 文件内添加 |
multiModule | 是否开启多模块 | bool | false | 个人建议开启 |
menuChildOpen | 是否默认展开菜单 | bool | false | 个人建议关闭 |
loadingTime | 初始化加载时间 | 0 | 0 | 建议0-2之间 |
示例说明
var options = {
iniUrl: "api/init.json", // 初始化接口
clearUrl: "api/clear.json", // 缓存清理接口
urlHashLocation: true, // 是否打开hash定位
bgColorDefault: 0, // 主题默认配置
multiModule: true, // 是否开启多模块
menuChildOpen: false, // 是否默认展开菜单
loadingTime: 0, // 初始化加载时间
};
miniAdmin.render(options);
在index.html
文件内进行初始化
引入lay-config.js
文件,请根据实际情况修改里面扩展的路径。
引入miniAdmin模块,根据需要传入初始化参数,执行miniAdmin.render(options);
方法。
初始化api接口返回的参数可以参考api目录下的init.json文件
或者查看使用说明的第二点的参数说明
示例说明
layui.use(['jquery', 'layer', 'miniAdmin'], function () {
var $ = layui.jquery,
layer = layui.layer,
miniAdmin = layui.miniAdmin;
var options = {
iniUrl: "api/init.json", // 初始化接口
clearUrl: "api/clear.json", // 缓存清理接口
urlHashLocation: true, // 是否打开hash定位
bgColorDefault: 0, // 主题默认配置
multiModule: true, // 是否开启多模块
menuChildOpen: false, // 是否默认展开菜单
};
miniAdmin.render(options);
layuimini.init('api/init.json');
});
homeInfo
是首页信息
logoInfo
是logo信息
menuInfo
是头部模块和左侧菜单对应的信息
示例说明
{
"homeInfo": {
"title": "首页",
"href": "page/welcome-1.html?t=1"
},
"logoInfo": {
"title": "LAYUI MINI",
"image": "images/logo.png",
"href": ""
},
"menuInfo": [
{
"title": "常规管理",
"icon": "fa fa-address-book",
"href": "",
"target": "_self",
"child":[...]
},
{
"title": "组件管理",
"icon": "fa fa-lemon-o",
"href": "",
"target": "_self",
"child":[...]
},
{
"title": "其它管理",
"icon": "fa fa-slideshare",
"href": "",
"target": "_self",
"child":[...]
}
]
}
返回参数对应的事例(code:0,清除缓存失败;code:1,表示清除缓存成功;)
{
"code": 1,
"msg": "清除服务端缓存成功"
}
miniPage.listen();
(备注:框架初始化时已经进行监听,一般情况下不需要再次操作)page/welcome-1.html
页面中有
<a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" >基本资料</a>
<a lay-href="" href="javascript:;" class="layuimini-back-home">首页</a>
miniPage.hashHome();
,示例在user-password.html
,user-setting.html
页面中都有示例说明
layui.use(['form','miniPage'], function () {
var form = layui.form,
layer = layui.layer,
miniPage = layui.miniPage;
/**
* 初始化表单,要加上,不然刷新部分组件可能会不加载
*/
form.render();
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
layer.close(index);
miniPage.hashHome();
});
return false;
});
});
miniTheme.bgColorConfig
方法内按相同格式添加。示例说明
var bgColorConfig = [
{
headerRight: '#1aa094',
headerRightThis: '#197971',
headerLogo: '#243346',
menuLeft: '#2f4056',
menuLeftThis: '#1aa094',
menuLeftHover: '#3b3f4b',
tabActive: '#1aa094',
},
{
headerRight: '#23262e',
headerRightThis: '#0c0c0c',
headerLogo: '#0c0c0c',
menuLeft: '#23262e',
menuLeftThis: '#737373',
menuLeftHover: '#3b3f4b',
tabActive: '#23262e',
}
];
.json
格式文件此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。