ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
### 基础方法 - config 模块 你可以在任何地方通过 layui.setter 得到 config.js 中的配置信息 - admin 模块 var admin = layui.admin; - admin.req(options) Ajax 请求,用法同 $.ajax(options),只是该方法会进行错误处理和 token 的自动传递 - admin.screen() 获取屏幕类型,根据当前屏幕大小,返回 0 - 3 的值 0: 低于768px的屏幕 1:768px到992px之间的屏幕 2:992px到1200px之间的屏幕 3:高于1200px的屏幕 - admin.exit() 清除本地 token,并跳转到登入页 - admin.sideFlexible(status) 侧边伸缩。status 为 null:收缩;status为 “spread”:展开 - admin.on(eventName, callback) 事件监听,下文会有讲解 - admin.popup(options) 弹出一个 layuiAdmin 主题风格的 layer 层,参数 options 跟 layer.open(options) 完全相同 - admin.popupRight(options) 在屏幕右侧呼出一个面板层。options 同上。 admin.popupRight({ id: 'LAY-popup-right-new1' //定义唯一ID,防止重复弹出 ,success: function(){ //将 views 目录下的某视图文件内容渲染给该面板 layui.view(this.id).render('视图文件所在路径'); } }); - admin.resize(callback) 窗口 resize 事件处理,我们推荐你使用该方法取代 jQuery 的 resize 事件,以避免多页面标签下可能存在的冲突。 - admin.fullScreen() 全屏 - admin.exitScreen() 退出全屏 - admin.events admin.events.refresh() 刷新当前右侧区域 admin.events.closeThisTabs() 关闭当前标签页 admin.events.closeOtherTabs() 关闭其它标签页 admin.events.closeAllTabs() 关闭全部标签页 ### view 模块 var view = layui.view; - view(id) 获取指定容器,并返回一些视图渲染的方法,如: //渲染视图,viewPath 即为视图路径 view('id').render(viewPath).then(function(){ //视图文件请求完毕,视图内容渲染前的回调 }).done(function(){ //视图文件请求完毕和内容渲染完毕的回调 }); //直接向容器插入 html,tpl 为 模板字符;data 是传入的数据。该方法会自动完成动态模板解析 view('id').send(tpl, data); 另外,render 方法支持动态传参,以用于视图内容接受。如: admin.popup({ id: 'LAY-popup-test1' ,success: function(){ view(this.id).render('视图文件所在路径', { id: 123 //这里的 id 值你可以在一些事件中动态获取(如 table 模块的编辑) }); } }); 那么,在视图文件中,你可以在动态模板中通过 {{ d.params.xxx }} 得到传入的参数,如: <script type="text/html" template lay-url="http://api.com?id={{ d.params.id }}"> 配置了接口的动态模板,且接口动态获取了 render 传入的参数:{{ d.params.id }} </script> <script type="text/html" template> 也可以直接获取:<input type="hidden" name="id" value="{{ d.params.id }}"> </script> 而如果是在 JS 语句中去获取模板传递过来的变量,可以借助动态模板的 lay-done 属性去实现,如: <script type="text/html" template lay-done="layui.data.sendParams(d.params)"> </script> 然后在 JS 语句中通过执行动态模板 lay-done 中对应的方法得到对应的参数值: <script> //定义一个 lay-done 对应的全局方法,以供动态模板执行 layui.data.sendParams = function(params){ console.log(params.id) //得到传递过来的 id 参数(或其他参数)值 //通过得到的参数值,做一些你想做的事 //… //若需用到 layui 组件,layui.use 需写在该全局方法里面,如: layui.use(['table'], function(){ var table = layui.table; table.render({ elem: '' ,url: 'url?id='+ params.id }); }); }; </script> 注意:上述实现需保证 layuiAdmin 为 1.2.0+` 总之,驾驭好 view().render().done(callback) 对您的项目开发至关重要。 ### ID唯一性 如果你开启了标签页功能,请务必注意 ID 的冲突,尤其是在你自己绑定事件的情况。ID 的命令可以遵循以下规则来规避冲突: LAY-路由-任意名 以消息中心页面为例,假设它的路由为:/app/message/,那么 ID 应该命名为: <button class="layui-btn" id="LAY-app-message-del">删除</button> ### 实用组件 **Hover 提示层** 通过对元素设置 lay-tips="提示内容" 来开启一个 hover 提示,如: <i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i> 其中 lay-offset 用于定于水平偏移距离(单位px),以调整箭头让其对准元素 ### 事件监听 - hash 监听路由地址改变 // 下述中的 xxx 可随意定义,不可与已经定义的 hash 事件同名,否则会覆盖上一事件 admin.on('hash(xxx)', function(router){ console.log(router); //得到路由信息 }); - side 监听侧边伸缩 // 下述中的 xxx 可随意定义,不可与已经定义的 side 事件同名,否则会覆盖上一事件 admin.on('side(xxx)', function(obj){ console.log(obj.status); //得到伸缩状态:spread 为展开状态,其它值为收缩状态 }); ### 兼容性 layuiAdmin 使用到了 layui 的栅格系统,而栅格则是基于浏览器的媒体查询。ie8、9不支持。 所以要在宿主页面(如 start/index.html )加上下面这段保证兼容: <!-- 让IE8/9支持媒体查询,从而兼容栅格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> ### 缓存问题 由于单页面版本的视图文件和静态资源模块都是动态加载的,所以可能存在浏览器的本地缓存问题,事实上我们也考虑到这个,因此,为了避免改动后的文件未及时生效,你只需在入口页面(默认为start/index.html)中,找到 layui.config ,修改其 version 的值即可。 我们推荐你分场景来更新缓存: 场景一:如果项目是在本地开发。你可以设置 version 为动态毫秒数,如: version: new Date().getTime() //这样你每次刷新页面,都会更新一次缓存 场景二:如果项目是在线上运行。建议你手工更新 version,如: version: '1.0.0' //每次发布项目时,跟着改动下该属性值即可更新静态资源的缓存 ### 升级事项 从官网更新资源包后,除了 src 和 dist 目录需要注意一下,其它目录和文件均可覆盖,下面以 src 为例(dist 由于是 src 构建后生成的目录,所以本质是和 src 一样的) src 目录下可以直接覆盖的有: src/lib/ src/style/ src/index.js 需要灵活调配的有: src/controller/ src/views/ src/config.js 如果没有改动默认配置,事实上 config.js 也可以覆盖升级 开发过程中,建议同时运行两个 layuiAdmin 。一个是已经实际运用的,一个是 layuiAdmin 本身的 Demo。以便从 Demo 中获取参考和提取示例。 ### 源码构建 当你在 src 目录完成开发后,你可通过 gulp 对 src 源码进行自动化构建,以生成用于线上环境的 dist 目录。并在入口页面中的 layui.config 的 base 参数指向 dist。 在资源包中根目录下看到的 gulpfile.js 是 layuiAdmin 写好的任务脚本,package.json 是任务配置文件,你只需按照以下步骤: 1、step1:确保你的电脑已经安装好了 Node.js,如果未安装,可去官网下载安装 2、step2: 命令行安装 gulp:npm install gulp -g 3、step3:切换到 layuiAdmin 项目根目录(即 gulpfile.js 所在目录),命令行安装任务所依赖的包:npm install 安装完成后,后续只需直接执行命令:gulp 即可完成 src 到 dist 目录的构建