layui常用彈窗和qrcode二維碼生成
框架前的前端補充
二維碼生成
步驟:
1. 引入Jquery.js文件
2. 引入jquery.qrcode.js文件
3. 引入支持中文的編碼js文件 (utf.js)
4. 在網頁中編寫一個div 用於顯示二維碼
<div id="div1"></div>
5. 準備二維碼的規格對象(JSON)
var config = {
width:數字,//值是number類型, 表示的單位是px 必須傳遞
height:數字,//值是number類型, 表示的單位是px 必須傳遞
text:"內容",//text就表示二維碼中存儲的數據 必須傳遞
correctLevel:數字,//取值爲0|1|2|3 表示二維碼的糾錯級別0:L/1:M/2:Q/3:H ,默認0 可選參數
background:"#rrggbb",//默認白色, 表示二維碼的後景顏色 可選參數
foreground:"#rrggbb",//默認黑色, 表示二維碼的前景顏色 可選參數
render:"繪製模式"//取值:table/canvas , 默認table 可選參數
};
6. 通過選擇器, 查找到上述的div ,得到Jquery對象, 通過jquery對象的qrcode函數生成二維碼
$("#div1").qrcode(config);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
layui
佈局部分
與BootStrap很像，就是展示一些界面效果，此處省略。
彈出層 layer
步驟:
1. 下載layer , 並將解壓後的layer文件夾 移動到項目中
2. 引入jquery.js
3. 引入layer.js
- 1
- 2
- 3
- 4
layer - msg函數
用於彈出信息提示框
格式1.
layer.msg("文本");
格式2. 抖動顯示
layer.msg("文本",function(){
//彈窗結束後會執行
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
layer - load函數
格式:
彈出loading:
var index = layer.load(數字0-2);
// 參數表示 loading的圖表
//loading窗口在彈出時, 不允許進行操作.
關閉loading:
layer.close(index);
格式2.
超時自動關閉的loading
var index = layer.load(數字0-2,{time:毫秒數字})
//在指定的毫秒後 ,如果沒有使用layer.close關閉, 則自動關閉
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
layer - msg函數(load效果)
格式:
彈出的格式:
var index = layer.msg("文本",{icon:16,shade:0.01})
//因爲是msg函數, 所以此窗口會自動消失.
關閉的格式:
layer.close(index);
- 1
- 2
- 3
- 4
- 5
- 6
layer - alert函數 信息提示窗
格式:
layer.alert("文本內容",{icon:圖片編號});
//圖片編號: 0-16之間
- 1
- 2
- 3
- 4
- 5
layer - tips函數 提示層
格式:
layer.tips("文本內容","選擇器",{tipsMore:true,tips:數字});
參數:
1. 參數: tipsMore : 是否允許同時存在多個彈出的tips
2. 參數: tips : 取值爲數字1-4 , 分別表示彈出在元素的 上/右/下/左 . 默認彈出在右邊
- 1
- 2
- 3
- 4
- 5
- 6
layer 所有彈出層的關閉
layer.closeAll();
- 1
作用: 用於在網頁中 循環展示固定的佈局數據 .
格式1.
給元素添加屬性: v-for="item of 數組名"
格式2.
給元素添加屬性: v-for="(item,index) of 數組名"
注意: 上述格式中的
數組名指的是: data中的數據key , 這個key對應的數據必須是數組
item 指的是: 每次循環時, 從數組中取出的數據的key , 可以使用插值表達式來顯示 {{item}}
index 指的是: 循環的輪數, 類似數據的下標.
案例:
<body>
<div id="content">
<ul>
<li v-for="item of msgs">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var v1 = new Vue({
el:"#content",
data:{
msgs:["鋤禾日當午","石鵬和魏洋","停車坐愛楓林晚","一牆紅杏出牆來","哈哈哈哈哈哈哈"]
}
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29