layui是一個(gè)前端UI框架。主要是配合JQuery使用。

---

開始使用

首先是下載文件，然后引入css和js文件。

引入之后就需要在<script>標(biāo)簽里面寫代碼了。layui里的js代碼都需要在layui.use()里面寫。

舉個(gè)例子，如果你想寫form表單，那么在html里面復(fù)制代碼之后，需要在js文件里面這樣寫：

layui.use('form', function() {let form = layui.form; })

上面的代碼就是準(zhǔn)備工作，之后就能在頁(yè)面里面看到內(nèi)容了。如果你還想在這個(gè)頁(yè)面里面加入表格，那么直接在use后面添加：

layui.use(['form', 'table'], function() {let form = layui.form; let table = layui.table;// 上面這種方式可以簡(jiǎn)寫為：let form = layui.form,table = layui.table; })

如果你想使用Jquery，那么只要像上面那樣引入jquery模塊就好了，不必自己?jiǎn)为?dú)引入jquery文件了。但是你想自己引入也沒問題，頁(yè)面只會(huì)加載一個(gè)jquery文件。像這樣：

['form', 'table', 'jquery'], function() {let form = layui.form; let table = layui.table,let $ = layui.$; }

寫完上述代碼之后，就可以使用jquery了。

使用元素

使用按鈕。layui提供了一個(gè)按鈕樣式layui-btn，那么只要在class里面寫入這個(gè)樣式就可以了。

<button　class="layui-btn">按鈕</button>// 這是一個(gè)button的按鈕,如果你想用<a>也完全沒問題<a href="" class="layui-btn" >

按鈕還提供了大小和顏色，同樣只需要添加對(duì)應(yīng)的class類名就可以了。

使用表單。首先是有時(shí)候可能會(huì)刷新不出來表單內(nèi)容，這時(shí)候需要在js代碼里面添加：

form.render(); //更新全部 form.render('select'); //刷新select選擇框渲染// 在更新的時(shí)候，有時(shí)候可能需要注意先后順序的問題~

---

在html里面，只要父元素里面有l(wèi)ayui-form的元素，都會(huì)把他們渲染為layui的樣式。比如說form表單,<form class="layui-form"></form>在這里的所有原始input/select等都會(huì)渲染為layui的樣式。但是我如果不想用他們的樣式，想要自己寫樣式，那么可以在里面添加lay-ignore，如

<input type="text" lay-ignore>

---

在表單驗(yàn)證方面，除了可以自己寫正則表達(dá)式外，layui也提供了驗(yàn)證屬性lay-verify，具體的值可以在官方文檔里面：內(nèi)置模塊–>表單 里面找。

// 提交的時(shí)候只能輸入數(shù)字 <input type="text" lay-verify="number">

---

事件監(jiān)聽，這是一個(gè)非常有用的功能。比如說：監(jiān)聽select下拉框選中、submit提交等。使用方法為：

<select lay-filter="test">form.on('select(filter)', function(data){ // 這里的filter應(yīng)該為testconsole.log(data.value); //得到被選中的值 }); // select 就是監(jiān)聽select // filter 就是select表單里面填寫的過濾器的值

阻止表單跳轉(zhuǎn)可以使用監(jiān)聽submit：

form.on('submit(*)', function(data){console.log(data.field) // 當(dāng)前容器的全部表單字段，名值對(duì)形式：{name: value}return false; // 阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。 });

也可以使用jquery來獲取submit，然后使用函數(shù)來return false。

表格。使用表格除了需要開始的聲明外，表格里的內(nèi)容都在table.render這里面寫。如果有頭欄的話，另外在 外面寫table.on事件。

在表格里，使用select下拉框的時(shí)候，有時(shí)候會(huì)遮擋，當(dāng)時(shí)使用了什么方法我忘了，雖然可以阻止上面一部分不被遮擋，但是表格最后幾行的下拉框照樣會(huì)被擋住。所以我選擇了使用一個(gè)彈層來代替下拉框layer.open({type: 2}。這里同樣需要先聲明一下layer，然后才能使用。

圖標(biāo)。字體圖標(biāo)的話，我感覺官方文檔提供的比較少，所以我還是推薦使用阿里的圖標(biāo)庫(kù)，內(nèi)容比較全。

注意事項(xiàng)

寫函數(shù)的時(shí)候，有時(shí)候函數(shù)聲明function test() {}會(huì)報(bào)錯(cuò)，可以使用這種方式

window.test = function() {}

或者函數(shù)表達(dá)式的方式

let test = function() {}

修改樣式。肯定有需要自己修改樣式的時(shí)候，但是我發(fā)現(xiàn)layui的樣式寫的很死，你寫的樣式根本“比不過”它。我有兩種方法：

• 第一種是行內(nèi)樣式，簡(jiǎn)單粗暴。缺點(diǎn)就是寫在html內(nèi)部，不利于維護(hù)和過度的耦合。而且通過layui渲染出來的html內(nèi)容是沒法寫入的！
• 第二種就是覆蓋樣式，通過f12 控制臺(tái)的Elements選項(xiàng)卡里面復(fù)制它本身的類，然后在自己的css文件里面從新聲明一次，在添上你自己的樣式。這個(gè)方法親測(cè)有效，就是比較麻煩。

使用layuiAmin模板的時(shí)候，左側(cè)導(dǎo)航欄會(huì)發(fā)生很多問題，比如說全部打開，跳轉(zhuǎn)頁(yè)面返回后不關(guān)閉等等。所以我是這樣寫的：

// 進(jìn)入頁(yè)面就給當(dāng)前導(dǎo)航加上高亮window.addNavActive = function () {$('.layui-this').parents('li').addClass('layui-nav-itemed');}// 跳轉(zhuǎn)返回頁(yè)面之后給導(dǎo)航加高亮window.returnAddActive = function (name) {$('.layui-nav-item').removeClass('layui-nav-itemed')$('dd[data-name=' + name + ']').parents('li').addClass('layui-nav-itemed')$('dd[data-name=' + name + ']').addClass('layui-this')};

這樣在所有的頁(yè)面都需要調(diào)用一下這個(gè)函數(shù)，缺點(diǎn)就是比較麻煩，不知道有沒有更好的方法。

4.有時(shí)候你看不懂這個(gè)框架的渲染方式的時(shí)候，可以打開f12，查看類名的渲染名稱及位置。

---

寫的可能有點(diǎn)亂，有些可能沒想起來，到時(shí)候在補(bǔ)充吧。

總結(jié)

以上是生活随笔為你收集整理的使用layui/layuiAdmin的总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。