快速了解layui中layer的使用

這兩天寫專案的時候用到layer，於是又把layui找出來看了看，layui確實是乙個比較強大的前端框架，裡面涵蓋了很多的前端元素，而這對於前端的開發者來說是省了很大的麻煩，從一些頁面元素到內建模組，都是採用了盡量少的**來渲染頁面，所以，我覺得自從用了layui就覺得對我的整個寫專案過程中節省了不少時間。

今天就來說說關於layui裡的layer的使用，主要提及的是pc端的用法，有時間再專門聊聊關於移動這一塊的，其實應該都是大同小異。

layer說白了屬於layui裡的乙個獨立出來的彈層框架，但是由於近期layui在一直更新，所以現在的layer可以獨立使用，也可以通過layui模組化使用。所以請按照你的實際需求來選擇。

一、引用場景不同

1、作為獨立元件使用：

引入好layer.js後，直接用即可

2、 layui 模組化使用：

在 layui 中使用 layer
layui.use('layer', function());

二、layer提供了不同的型別

layer提供了5種層型別。可傳入的值有：

0（資訊框，預設）；

1（頁面層）；

2（iframe層）；

3（載入層）；

4（tips層）。

若你採用layer.open()方式呼叫，則type為必填項（資訊框除外）。

三、關於layer裡的內容分類

layer裡的內容分類有：string，dom和array，預設：''。當然，content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定dom，更可以隨著type的不同而不同。

1、接下來我們看看在type為1（頁面層）的時候，也就是關於頁面層的引入content內容的不同寫法：

1
layer.open();
5layer.open();9//
ajax獲取
10 $.post('
url'
, {}, function(str));
15 });

在這裡我要提醒各位的是，在type為頁面層的時候layer的內容是沒有array這個分類的寫法的。

2、接下來我們看看在type為2（iframe層）的時候，也就是關於頁面層的引入content內容的不同寫法：

1
//如果是普通iframe層
2layer.open(); 67
//若iframe層-父子操作
8layer.open();
1516
//若iframe層-多**
17layer.open();
26 layer.msg('
點選任意處關閉');
2728
//彈出即全屏
29var index =layer.open();
35 layer.full(index);

3、接下來我們看看在type為3（載入層）的時候，也就是關於頁面層的引入content內容的不同寫法：

1
//載入層-預設風格
2layer.load();
3settimeout(function(), 2000);6
//載入層-風格2
7 layer.load(1);8
settimeout(function(), 2000
);11
//載入層-風格3
12 layer.load(2
);13
settimeout(function(), 2000
);16
//載入層-風格4
17 layer.msg('
載入中'
, );

4、接下來我們看看在type為4（tips層）的時候，也就是關於頁面層的引入content內容的不同寫法：

1
//tips層-上
2 layer.tips('
上', '
#id或者.class
', );6//
tips層-右
7 layer.tips('
預設就是向右的
', '
#id或者.class
',);
11//
tips層-下
12 layer.tips('
下', '
#id或者.class
', );
16//
tips層-左
17 layer.tips('
左邊麼麼噠
', '
#id或者.class
', );

在這裡我要提醒大家的是tips方法屬於內建方法，因為用的較多，一直用open方法的話，會寫太多的**，比較反鎖，所以，簡單的說就是把tips專門封裝成了乙個方法，寫起來比較簡練，當然若是想用公共方法open來寫也是可以的，接下來看一下用open來寫的一種寫法：

1
layer.open()

通過以上例子不難看出，tips裡的1就是「上」，2就是「右」，3就是「下」，4就是「左」，切記沒有0哦！

四、簡單介紹一下layer裡的其他基礎引數

1、**——skin

skin不僅允許你傳入layer內建的樣式class名，還可以傳入您自定義的class名。目前layer內建的skin有：layui-layer-lan

layui-layer-molv

1
//內建的綠色
2layer.open();
10//
內建的藍色
11layer.open();

以下是乙個自定義風格的簡單例子：

1
//單個使用
2layer.open();5//
全域性使用。即所有彈出層都預設採用，但是單個配置skin的優先順序更高
6layer.config()9//
css 
10 body .demo-class .layui-layer-title
11 body .demo-class .layui-layer-btn
12 body .demo-class .layui-layer-btn a
13 body .demo-class .layui-layer-btn .layui-layer-btn114…
15 加上body是為了保證優先順序。你可以借助chrome除錯工具，定義更多樣式控制層更多的區域。

2、寬高——area在預設狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: '500px'，高度仍然是自適應的。當你寬高都要定義時，你可以area: ['500px', '300px']。

3、offset預設情況下不用設定。但如果你不想垂直水平居中，你還可以進行以下賦值

4、圖示——icon

資訊框預設不顯示圖示。當你想顯示圖示時，預設**可以傳入0-6如果是載入層，可以傳入0-2。

1
//eg1，這裡的icon可以傳入0-6
2 layer.alert('
酷斃了', );3//
eg2，這裡的icon可以傳入0-6
4 layer.msg('
不開心。。
', );5//
eg3，這裡的icon可以傳入0-2
6 layer.load(1); //
風格1的載入

5、關閉按鈕——closebtnlayer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則closebtn: 0

6、遮罩層——shade

即彈層外區域。預設是0.3透明度的黑色背景（'#000'）。如果你想定義別的顏色，可以shade: [0.8, '#393d49']；如果你不想顯示遮罩，可以shade: 0；如果你的shade是存在的，那麼你可以設定shadeclose來控制點選彈層外區域關閉。

7、自動關閉的時間——time

預設不會自動關閉。當你想自動關閉時，可以time: 5000，即代表5秒後自動關閉，注意單位是毫秒（1秒=1000毫秒）

好了，常用的也就這些了，希望能對大家有幫助，當然也算是對我了解的乙個鞏固。

快速了解layui中layer的使用

layer快速入門

初識layer 快速入門

layui與layer同時引入衝突的問題

快速了解layui中layer的使用

layer快速入門

初識layer 快速入門

layui與layer同時引入衝突的問題

相關推薦