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

---

開始使用

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

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

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

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

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

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

如果你想使用Jquery，那么只要像上面那樣引入jquery模塊就好了，不必自己單獨引入jquery文件了。但是你想自己引入也沒問題，頁面只會加載一個jquery文件。像這樣：

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

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

使用元素

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

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

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

使用表單。首先是有時候可能會刷新不出來表單內容，這時候需要在js代碼里面添加：

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

---

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

<input type="text" lay-ignore>

---

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

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

---

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

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

阻止表單跳轉可以使用監聽submit：

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

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

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

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

圖標。字體圖標的話，我感覺官方文檔提供的比較少，所以我還是推薦使用阿里的圖標庫，內容比較全。

注意事項

寫函數的時候，有時候函數聲明function test() {}會報錯，可以使用這種方式

window.test = function() {}

或者函數表達式的方式

let test = function() {}

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

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

使用layuiAmin模板的時候，左側導航欄會發生很多問題，比如說全部打開，跳轉頁面返回后不關閉等等。所以我是這樣寫的：

// 進入頁面就給當前導航加上高亮window.addNavActive = function () {$('.layui-this').parents('li').addClass('layui-nav-itemed');}// 跳轉返回頁面之后給導航加高亮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')};

這樣在所有的頁面都需要調用一下這個函數，缺點就是比較麻煩，不知道有沒有更好的方法。

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

---

寫的可能有點亂，有些可能沒想起來，到時候在補充吧。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。