layui2.8已經(jīng)于今天正式發(fā)布了，新增優(yōu)化了大量特性，這里按照l(shuí)ayui更新日志的模塊結(jié)構(gòu)，詳細(xì)為你一一介紹。
基礎(chǔ)
風(fēng)格調(diào)整
新版調(diào)整主色調(diào)為#16baaa，在原有的墨綠基礎(chǔ)上賦予了清新。
(資料圖片僅供參考)
更簡(jiǎn)單的構(gòu)建
構(gòu)建代碼更簡(jiǎn)單，除字體外，只有js和css兩個(gè)文件：
layui-v2.8.0 ├─ css │ └─ layui.css ├─ font │ ├─ iconfont.eot │ ├─ iconfont.svg │ ├─ iconfont.ttf │ ├─ iconfont.woff │ └─ iconfont.woff2 └─ layui.js 相比原有的目錄結(jié)構(gòu)：
layui ├─ css │ ├─ modules │ │ ├─ laydate │ │ │ └─ default │ │ │ └─ laydate.css │ │ ├─ layer │ │ │ └─ default │ │ │ ├─ icon-ext.png │ │ │ ├─ icon.png │ │ │ ├─ layer.css │ │ │ ├─ loading-0.gif │ │ │ ├─ loading-1.gif │ │ │ └─ loading-2.gif │ │ └─ code.css │ └─ layui.css ├─ font │ ├─ iconfont.eot │ ├─ iconfont.svg │ ├─ iconfont.ttf │ ├─ iconfont.woff │ └─ iconfont.woff2 └─ layui.js 將原先 layer/laydate/code 的 css 統(tǒng)一構(gòu)建到 layui.css，以盡量減少請(qǐng)求，同時(shí)原有的圖片資源全部替換為純CSS實(shí)現(xiàn)。
舍棄layedit
新版正式的舍棄掉了內(nèi)置的富文本編輯器，畢竟富文本編輯器本身就是深不見底的坑，在各個(gè)UI庫(kù)或框架中也沒有內(nèi)置，算是拋掉了歷史包袱。如果有需要可以自行選擇其他優(yōu)秀的編輯器：
tinymce ckeditor simditor wangeditor quill新增18個(gè)字體圖標(biāo)
布局支持超大屏幕
新增了xl的超大屏幕自適應(yīng)標(biāo)記。
其他優(yōu)化
其中還優(yōu)化了lay.options 和layui.event方法的表現(xiàn)。
Layer
動(dòng)畫設(shè)置
通過anim參數(shù)實(shí)現(xiàn)四個(gè)彈出方向的動(dòng)畫類，可實(shí)現(xiàn)邊緣抽屜彈出，同時(shí)關(guān)閉時(shí)自動(dòng)匹配對(duì)應(yīng)的動(dòng)畫。
WIN10風(fēng)格彈框
新增了一個(gè)win10風(fēng)格的確認(rèn)框，當(dāng)你給客戶打包成客戶端時(shí)，或許能要到更多的預(yù)算？
回調(diào)增加參數(shù)
新增 success 等回調(diào)的第三個(gè)參數(shù)：即當(dāng)前彈層實(shí)例對(duì)象，以便操作內(nèi)部方法。
layer.open({ type: 1, content: "內(nèi)容", success: function(layero, index, that){ // 彈層的最外層元素的 jQuery 對(duì)象 console.log(layero); // 彈層的索引值 console.log(index); // 彈層內(nèi)部原型鏈中的 this --- 2.8+ console.log(that); }});photos彈框增加底欄
新增 photos 層的私有屬性 hideFooter，用于控制是否隱藏圖片底部欄。
新增 photos 層底部欄的「查看原圖」功能。
新增 photos 層對(duì) lay-src 屬性的支持。
其他
彈框輸入框支持自定義placeholder 增加了layer.closeLast關(guān)閉最近打開的彈框 優(yōu)化了底層相關(guān)事件的處理 修復(fù)了若干問題table
表格組件進(jìn)行了大量的特性更新，這里不再摘抄，有需要可以自行查看。表格組件更加完善健壯。
樹形table組件
本次更新增加了樹形表格組件，以后不需要找插件了。
form
優(yōu)化了select樣式，同時(shí)對(duì)于搜索選擇，優(yōu)化了刪除關(guān)鍵字的表現(xiàn)。
單選框和復(fù)選框支持html的標(biāo)題
其他
優(yōu)化了單選和多選的更多表現(xiàn)，具體可以查看日志，這里不再摘錄。
日期組件
日期選擇組件也得到的加強(qiáng)，增加了許多特性。
日期快捷欄
新增 shortcuts 屬性，用于開啟面板左側(cè)的快捷選擇功能 。
全面板模式
將日期和時(shí)間同時(shí)顯示，而不需要單獨(dú)點(diǎn)開設(shè)置。
內(nèi)置多主題
范圍選擇的input聯(lián)動(dòng)
注意，下面截圖中，實(shí)際上有兩個(gè)input標(biāo)簽。
更多效果
增加了國(guó)際模式，還增加了公歷節(jié)日、國(guó)際節(jié)日等標(biāo)注，同時(shí)支持自定義標(biāo)注日期。
其他
日期組件還進(jìn)行了大量操作的更新，這里不再記錄。
下拉菜單
下拉菜單組件也得到了強(qiáng)化，比如重載數(shù)據(jù)、陰影面板等， 同時(shí)也增加了很多效果。
在表格中使用
自定義觸發(fā)事件
右鍵菜單出發(fā)
也支持全部頁(yè)面綁定右鍵事件。
自定義菜單內(nèi)容
導(dǎo)航
新增淺色主體導(dǎo)航。
底層方法
2.8增加了幾個(gè)常用的底層方法，會(huì)給開發(fā)帶來極大的便利。
鏈接解析
解析url為一個(gè)數(shù)組。
/ 假設(shè)當(dāng)前頁(yè)面 url 為： https://domain.com/docs/base.html?a=1&c=3#/user/set/id=123/var url = layui.url();// url 返回結(jié)果為：{ "pathname": ["docs","base.html"], // 路徑 "search": {"a":"1","c":"3"}, // 參數(shù) "hash": { // hash 解析 "path": ["user","set",""], // hash 中的路徑 "search": {"id":"123"}, // hash 中的參數(shù) "hash": "", // hash 中的 hash "href": "/user/set/id=123/" // hash 中的完整鏈接 }}本地存儲(chǔ)
如今越來越多的前端都會(huì)用到瀏覽器localstorage，但是又希望通過一個(gè)封裝庫(kù)去操作，以取得更好地瀏覽器兼容性。其實(shí)
本地存儲(chǔ)是對(duì) localStorage 和 sessionStorage 的友好封裝，可更方便地管理本地?cái)?shù)據(jù)。方法如下：
layui.data(table, settings);即 localStorage，數(shù)據(jù)在瀏覽器中的持久化存儲(chǔ)，除非物理刪除。 layui.sessionData(table, settings);即 sessionStorage ，數(shù)據(jù)在瀏覽器中的會(huì)話性存儲(chǔ)，頁(yè)面關(guān)閉后即失效。 兩者使用方式完全一致。其中參數(shù) table為表名，settings是一個(gè)對(duì)象，用于設(shè)置 key/value。下面以 layui.data()方法為例：
// 【增】：向 test 表插入一個(gè) nickname 字段，如果該表不存在，則自動(dòng)建立。layui.data("test", { key: "nickname", value: "張三"});// 【刪】：刪除 test 表的 nickname 字段layui.data("test", { key: "nickname", remove: true});layui.data("test", null); // 刪除 test 表// 【改】：同【增】，會(huì)覆蓋已經(jīng)存儲(chǔ)的數(shù)據(jù)// 【查】：向 test 表讀取全部的數(shù)據(jù)var localTest = layui.data("test");console.log(localTest.nickname); // 獲得“張三”瀏覽器信息
var device = layui.device(key);
參數(shù) key 可選。可利用該方法對(duì)不同的設(shè)備進(jìn)行差異化處理，device 即為不同設(shè)備下返回的不同信息，如下
{ os: "windows", // 當(dāng)前瀏覽器所在的底層操作系統(tǒng)，如：Windows、Linux、Mac 等 ie: false, // 當(dāng)前瀏覽器是否為 ie6-11 的版本，如果不是 ie 瀏覽器，則為 false weixin: false, // 當(dāng)前瀏覽器是否為微信 App 環(huán)境 android: false, // 當(dāng)前瀏覽器是否為安卓系統(tǒng)環(huán)境 ios: false, // 當(dāng)前瀏覽器是否為 IOS 系統(tǒng)環(huán)境 mobile: false // 當(dāng)前瀏覽器是否為移動(dòng)設(shè)備環(huán)境（v2.5.7 新增）}layui.link(href)
加載 CSS，href 即為 css 路徑。一般用于動(dòng)態(tài)加載你的外部 CSS 文件
layui.getStyle(node, name)
獲得一個(gè)原始 DOM 節(jié)點(diǎn)的 style 屬性值，如： layui.getStyle(document.body, "font-size")
layui.each(obj, callback)
對(duì)象（Array、Object、DOM 對(duì)象等）遍歷，可用于取代 for 語(yǔ)句
layui.sort(obj, key, desc)
將數(shù)組中的對(duì)象按某個(gè)成員重新對(duì)該數(shù)組排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], "a"); // 返回：[{"a":1},{"a":3},{"a":5}]
其他
除了上面介紹的，2.8還有更多的新增的特性和優(yōu)化。比如：增強(qiáng)了顏色選擇器的操作，增強(qiáng)了輪播的操作，增強(qiáng)了代碼預(yù)覽，增強(qiáng)了utils類和更多細(xì)節(jié)的方法。
升級(jí)兼容性
2.8的版本對(duì)老版本兼容非常好，如果你的layui是2.7.6，那么基本上可以做到無(wú)縫升級(jí)。我自己有一個(gè)開源的后臺(tái)框架ulthon_admin，現(xiàn)在已經(jīng)升級(jí)到2.8.0了，可以具體參考一下升級(jí)的文件變化，基本上只要把主體的js和css換掉就可以了。
其次如果你有定制的layer的樣式，那么要注意修改，layer彈框的右上角操作圖標(biāo)已經(jīng)不再是圖片，而是純css實(shí)現(xiàn)，可能你需要注意一下。
除此之外，layui2.8對(duì)老版本的兼容性非常好，趕快升級(jí)到2.8吧，享受ayui更多的特性。
最后
祝layui越做越好。layui基本上已經(jīng)成為“傳統(tǒng)前端”最流行的ui庫(kù)了，而現(xiàn)在layui自從將社區(qū)遷移到gitee之后，過濾掉了大量“無(wú)知”的開發(fā)者，更多的“認(rèn)真”的開發(fā)者都沉淀下來，將來也會(huì)越發(fā)展越好。
原文標(biāo)題：Layui2.8正式發(fā)布，本文詳細(xì)介紹所有新特性
原文地址：https://phpreturn.com/index/a6446527cab7e0.html
原文平臺(tái)：PHP武器庫(kù)
版權(quán)聲明：本文由phpreturn.com（PHP武器庫(kù)官網(wǎng)）原創(chuàng)和首發(fā)，所有權(quán)利歸phpreturn（PHP武器庫(kù)）所有，本站允許任何形式的轉(zhuǎn)載/引用文章，但必須同時(shí)注明出處。
關(guān)鍵詞：
