文檔 · layui

### 基礎方法 - 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 ）加上下面這段保證兼容：   ### 緩存問題由于單頁面版本的視圖文件和靜態資源模塊都是動態加載的，所以可能存在瀏覽器的本地緩存問題，事實上我們也考慮到這個，因此，為了避免改動后的文件未及時生效，你只需在入口頁面（默認為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 目錄的構建