layui2.8已經(jīng)于今天正式發(fā)布了，新增優(yōu)化了大量特性，這里按照layui更新日志的模塊結(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庫或框架中也沒有內(nèi)置，算是拋掉了歷史包袱。如果有需要可以自行選擇其他優(yōu)秀的編輯器：

新增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 屬性的支持。

其他

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ā)

也支持全部頁面綁定右鍵事件。

自定義菜單內(nèi)容

導(dǎo)航

新增淺色主體導(dǎo)航。

底層方法

2.8增加了幾個(gè)常用的底層方法，會(huì)給開發(fā)帶來極大的便利。

鏈接解析

解析url為一個(gè)數(shù)組。

/ 假設(shè)當(dāng)前頁面 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è)封裝庫去操作，以取得更好地瀏覽器兼容性。其實(shí)

本地存儲(chǔ)是對(duì) localStorage 和 sessionStorage 的友好封裝，可更方便地管理本地?cái)?shù)據(jù)。方法如下：

兩者使用方式完全一致。其中參數(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 語句

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，那么基本上可以做到無縫升級(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庫了，而現(xiàn)在layui自從將社區(qū)遷移到gitee之后，過濾掉了大量“無知”的開發(fā)者，更多的“認(rèn)真”的開發(fā)者都沉淀下來，將來也會(huì)越發(fā)展越好。

原文標(biāo)題：Layui2.8正式發(fā)布，本文詳細(xì)介紹所有新特性

原文地址：https://phpreturn.com/index/a6446527cab7e0.html

原文平臺(tái)：PHP武器庫

版權(quán)聲明：本文由phpreturn.com（PHP武器庫官網(wǎng)）原創(chuàng)和首發(fā)，所有權(quán)利歸phpreturn（PHP武器庫）所有，本站允許任何形式的轉(zhuǎn)載/引用文章，但必須同時(shí)注明出處。

關(guān)鍵詞：