3、admin模塊(常用) · EasyAdmin用戶手冊集合

## 3.1.全部方法 :id=method 方法 | 參數 | 描述 :---|:--- |:--- flexible(expand) | true和false | 折疊/展開側導航 activeNav(url) | a標簽里面的lay-href值 | 設置側導航欄選中 refresh(url) | url，可為空 | 刷新指定Tab或當前Tab closeAllTabs() | 無 | 關閉所有選項卡 closeOtherTabs(url) | url | 關閉除url外所有選項卡 closeThisTabs(url) | url，可為空 | 關閉url或當前選項卡 rollPage(d) | 方向(left、right、auto) | 滾動選項卡tab | | iframeAuto() | 無 | 讓當前的ifram彈層自適應高度 closeThisDialog() | 無 | 關閉當前iframe彈窗 closeDialog(elem) | dom選擇器 | 關閉elem元素所在的彈窗(頁面層彈窗) | | putTempData(key, value) | key,value | 緩存臨時數據 getTempData(key) | key | 獲取緩存的臨時數據 parseJSON(string) | 字符串 | 解析json，解析失敗返回undefined getPageHeight() | 無 | 獲取瀏覽器高度 getPageWidth() | 無 | 獲取瀏覽器寬度 | | btnLoading(elem) | dom選擇器 | 設置按鈕為加載狀態 openSideAutoExpand() | 無 | 開啟鼠標移入側邊欄自動展開 openCellAutoExpand() | 無 | 開啟鼠標移入表格單元格超出內容自動展開 modelForm(layero, btnFilter, formFilter) | | 把彈窗自帶的按鈕跟彈窗內的表單綁定一起 | | hasPerm(auth) | 權限 | 判斷當前登錄的用戶是否有權限 renderPerm() | 無 | 移除沒有權限的dom元素使用示例： ```javascript layui.use(['admin'], function () { var admin = layui.admin; var pageHeight = admin.getPageHeight(); // 獲取瀏覽器高度 }); ``` **admin.iframeAuto()方法：** <br/> &emsp;針對type:2的彈窗自適應彈窗高度，寫在彈窗的子頁面中，此方法是調用一次做一次高度自適應，如果你用js動態修改了彈窗子頁面的高度，需要再調用一次。 **admin.closeThisDialog()：** <br/> &emsp;關閉當前iframe類型彈窗，針對type:2的彈窗，在彈窗的子頁面調用即可關閉當前的iframe彈窗。 **admin.closeDialog(elem)：** <br/> &emsp;關閉非iframe類型的彈窗，調用需要傳遞彈窗頁面里面任意一個的元素： ``` admin.closeDialog('#xxx'); // 關閉id為xxx元素所在的頁面層的彈窗 ``` 關閉彈窗還可以使用ew-event操作： ```html  <button ew-event="closeDialog"></button>  <button ew-event="closeIframeDialog"></button> ``` admin.openSideAutoExpand()方法需要在index.html中調用，admin.openCellAutoExpand()可在任何頁面調用。 ## 3.2.判斷權限hasPerm :id=has_perm 通過“admin.hasPerm(auth)”可以控制按鈕級別的權限隱藏： ```javascript if(!admin.hasPerm('user:add')) { $('#btnUserAdd').remove(); } ``` - “hasPerm”方法需要通過“config.getUserAuths”方法來獲取全部權限； - “config.getUserAuths”是通過“config.getUser”方法從用戶信息中獲取權限的； - "config.getUser"從本地緩存中獲取用戶信息的，"config.putUser"把用戶信息放入緩存中。在main.js中有獲取用戶信息并通過"config.putUser"放入緩存中的寫法，請參考。 **還可以通過加屬性的方式來隱藏：** ```html <button perm-show="user:add">添加</button> ``` > “perm-show”可以用于任意元素，對于動態添加的元素調用admin.renderPerm()來更新渲染。 ## 3.3.popupRight和open :id=open 快速使用： ```javascript // 打開彈窗 admin.open({ type: 2, content: 'tpl-theme.html' }); // 打開右側面板 admin.popupRight({ type: 2, content: 'tpl-theme.html' }); ``` &emsp;這兩個方法只是對layer.open進行了一層封裝，用法和layer一樣，查看[layer文檔](https://www.layui.com/doc/modules/layer.html)。 **新增參數url：** ```javascript admin.open({ title: 'Hello', url: 'tpl-theme.html' }); admin.popupRight({ url: 'tpl-theme.html' }); ``` &emsp;`type:2, content:xxx`這種是iframe類型的彈窗，使用`url`會通過ajax加載頁面到彈窗中，而不是iframe嵌入。 &emsp;當使用url方式的時候，彈窗頁面應該是代碼片段，而不是完整的html，如下所示： ```html <style> * { color: #333; } </style> <form id="modelRoleForm" lay-filter="modelRoleForm" class="layui-form model-form"> <input name="roleId" type="hidden"/> <div class="layui-form-item"> <label class="layui-form-label">角色名</label> <div class="layui-input-block"> <input name="roleName" placeholder="請輸入角色名" type="text" class="layui-input" maxlength="20" lay-verType="tips" lay-verify="required" required/> </div> </div> <div class="layui-form-item text-right"> <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button> <button class="layui-btn" lay-filter="modelSubmitRole" lay-submit>保存</button> </div> </form> <script> layui.use(['layer', 'form'], function () { var $ = layui.jquery; var layer = layui.layer; var form = layui.form; // 表單提交事件 form.on('submit(modelSubmitRole)', function (data) { console.log(data.field); return false; }); }); </script> ``` &emsp;頁面不需要html、body這些東西，并且可以直接用`<script>`標簽來寫事件，至于參數傳遞，請到彈窗專題查看。 > 使用url方式更加符合單頁面應用 ## 3.4.加載動畫loading :id=loading 快速使用： ```javascript admin.showLoading('#xxx'); // 在id為xxx的元素中顯示加載層 admin.showLoading('#xxx', 1, '.8'); // 顯示type為1、透明度為0.8的遮罩層 ``` - 參數一`elem`&emsp;非必填&emsp;元素選擇器，不填為body； - 參數二`type`&emsp;非必填&emsp;動畫類型(1 小球，2 魔方，3信號)，默認是1； - 參數三`opacity`&emsp;非必填&emsp;透明度(0 - 1)，默認不透明；尺寸控制，提供有兩種尺寸，用法： ```javascript admin.showLoading({ elem: '#xxx', type: 1, size: 'sm' // 默認是sm小型尺寸，還可以選md大型尺寸 }); ``` 移除加載動畫： ```javascript admin.removeLoading('#xxx'); admin.removeLoading('#xxx', true, true); ``` - 參數一&emsp;非必填&emsp;元素選擇器，不填為body； - 參數二&emsp;非必填&emsp;true是淡出效果，false直接隱藏，默認是true； - 參數三&emsp;非必填&emsp;true是刪除，false是隱藏不刪除，默認是false；頁面載入的加載動畫： ```html <body>  <div class="page-loading"> <div class="ball-loader"> <span></span><span></span><span></span><span></span> </div> </div>  <div class="page-loading"> <div class="rubik-loader"></div> </div>  <div class="page-loading"> <div class="signal-loader"> <span></span><span></span><span></span><span></span> </div> </div>  <div class="page-loading"> <div class="signal-loader sm"> <span></span><span></span><span></span><span></span> </div> </div> </body> ``` &emsp;寫在頁面中需要在js中調用`admin.removeLoading()`移除加載動畫，common.js中已經寫好了。 **按鈕loading：** ```javascript admin.btnLoading('#btn1'); // 設置按鈕為loading狀態 admin.btnLoading('#btnLoading', false); // 移除按鈕的loading狀態 admin.btnLoading('#btn1', '加載中'); // 設置按鈕為loading狀態，同時修改按鈕文字 admin.btnLoading('#btnLoading', '保存', false); // 移除按鈕的loading狀態，同時修改按鈕文字 ``` ## 3.5.ajax封裝 :id=ajax req方法： ```javascript admin.req('url',{ username: 'admin', password: '123456' }, function(res){ alert(res.code + '-' + res.msg); }, 'get'); ``` - 參數一&emsp;請求的url - 參數二&emsp;請求參數 - 參數三&emsp;請求回調（失敗也進此回調，404、403等） - 參數四&emsp;請求方式，get、post、put、delete等 ajax方法，參數同$.ajax： ```javascript admin.ajax({ url: 'url', data: {}, headers： {}, type: 'post', dataType: 'json', success: function(res){ alert(res.code + '-' + res.msg); } }); ``` &emsp;req和ajax都實現了自動傳遞header、預處理、系統錯誤依然回調到success等功能。 > 自動傳遞header是通過config.getAjaxHeaders()方法，請求回調預處理是通過config.ajaxSuccessBefore()方法。 ## 3.6.ew-event事件綁定 :id=event 使用示例： ```html <a ew-event="fullScreen">全屏</a> <a ew-event="flexible">折疊導航</a> ``` 事件 | 描述 :---|:--- flexible | 折疊側導航 refresh | 刷新主體部分 closeThisTabs | 關閉當前選項卡 closeOtherTabs | 關閉其他選項卡 closeAllTabs | 關閉全部選項卡 leftPage | 左滾動選項卡 rightPage | 右滾動選項卡 | closeDialog | 關閉當前頁面層彈窗 closeIframeDialog | 關閉當前iframe彈窗 | theme | 打開主題設置彈窗 note | 打開便簽彈窗 message | 打開消息彈窗 psw | 打開修改密碼彈窗 logout | 退出登錄 | fullScreen | 全屏切換 back | 瀏覽器后退 | open | 打開彈窗 popupRight | 打開右側彈窗 ew-event屬性可用于任何元素，不僅僅是a標簽，theme、note等可以通過`data-url`屬性配置對應的url，還可以通過`data-window="top"`屬性配置在父頁面處理事件。 ```html <a ew-event="theme" data-url="xxx.html">主題</a> ``` ## 3.7.open和popupRight事件 :id=event_open 這兩個事件是用來支持非js方式打開彈窗： ```html <button ew-event="open" data-type="2" data-content="http://baidu.com">iframe彈窗</button> <button ew-event="open" data-type="1" data-url="form.html">頁面彈窗</button> <button ew-event="open" data-type="1" data-content="#userForm">頁面彈窗</button> <form id="userForm">......省略</form>  <button ew-event="open" data-type="1" data-content="Hello" data-area="80px,60px" data-offset="10px,10px">頁面彈窗</button>  <button ew-event="popupRight" data-type="2" data-url="http://baidu.com" data-title="百度一下，你就知道">右側彈窗</button>  <button ew-event="open" data-type="1" data-content="Hello" data-success="onDialogSuccess">頁面彈窗</button> <script> layui.use(['layer'], function(){ var layer = layui.layer; // 方法需要加window window.onDialogSuccess = function(){ layer.msg('彈窗被成功打開了'); }; }); </script> ``` layer支持的參數大部分都可以通過data屬性來設置，數組類型用逗號分隔，function類型需要把作用域放在window對象下。