最近在做二手車的后台系統搭建，前端使用的框架是 layui，現在我對layui進行一下簡單的記錄。
layui兼容Ie7以上所有瀏覽器，內置了很多好用的模塊，包括彈框（div,簡單的按鈕組，iframe，msg）分頁，表格，表單，文件上傳，日期等模塊，而模塊的引入也十分人性化，使用layui.use引入相應的所需模塊，類似於require.js
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
});
今天總結一下在使用layui過程中遇到的問題
1.內置模塊功能不能用 一定要用use引入 你要使用的組建，並在內部函數中聲明一次。
layui.use(['table','laypage'], function(){
var table = layui.table, 表格
$= layui.jquery, 內置jquery
form = layui.form, 表單
laypage = layui.laypage; 分頁
var beginTime,endTime;
var laydate = layui.laydate; 日期組建
var limit=10,page=1;
//日期組建的
laydate.render({
elem: '#date',
range: true
,ready: function(date){
// console.log(date); //得到初始的日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
}
,done: function(value, date, endDate){
$('#date').css('width',200);
var arrTime=value.split(' - ');
beginTime=arrTime[0];
endTime=arrTime[1]
}
});
});
2019-09-23
layui內容彈框模塊 layer ，當頁面 引入其他模塊的時候 由於依賴關系 會自動引入，當頁面 沒有引入其他模塊 ，而需使用layer的時候 ，需要 layui.use('layer') 即可使用
2.layui中 slect form表單元素 不美化顯現的問題
1.layui中美化的表單元素 在渲染完成要添加 form.render()
$.each($('#classId option'),function (i, v) {
if($(v).val()==data.id){
$(v).attr("selected","selected")
}
})
form.render()
2.渲染之后還是沒有，檢查一下html結構 是否在父級元素上有layui-form的類名
<div class="layui-form">
<label for="unit" class="col-lg-2 control-label"> 商品單位:</label>
<div class="col-lg-6">
<select class="layui-input" id="unit" lay-search></select>
</div>
</div>
3.layui select 多選框
官方文檔並沒有 select多選框 不過大牛們利用layui改造了很多select的多選框 社區有一些介紹 戳這里 我用的是select多選v3版本 有一些問題 但是對於目前的功能比較適合 地址戳這里 這里對select v.3的功能介紹展示的很全 以后用到可以直接訪問
select.v4地址 戳這里
接下來 我記錄一下 我的使用 效果圖如下
（1）現引入資源 剛附上的鏈接里 拿來直接用的資源
（2）在頁面引入 js
還有一種方式 是將js引入到layui的資源js中
和其他內置模塊一樣 引入模塊名 並且調用 但是這個需要配置一下路徑
layui.use(['table','upload','laypage','formSelects'], function(){
var upload = layui.upload,laydate = layui.laydate,form = layui.form,$ = layui.$;var formSelects = layui.formSelects
html中
xm-select-search 搜索
xm-select-type 樣式類型
xm-select 選擇器標志 和js中 對應
<select id="serviceNetworkId" xm-select="select" xm-select-type="3" xm-select-search="" lay-filter="xm-select"></select>
js中 一般layui 中表單渲染 是from.render()
formSelects.render({
name: 'select', 和xm-select對應 標志應用
on: function(data, arr){
var a='';
$.each(arr,function (i,v) {
a+=v.val+','
})
//把多選的內容存儲起來
goodCreate.serviceNetworkIdStr=a.slice(0,-1)
}
});
（3）賦值，當用戶已經編輯過一次 如何反寫回去呢
formSelects.value('select', serviceNetworkIdArr);
serviceNetworkIdArr是一個數組 是option的value組成的數組
formSelects.value('select'); //獲取選中的值
formSelects.value('select', 'val'); //獲取選中的val數組
formSelects.value('select', 'name'); //獲取選中的name數組
formSelects.value('select', [1, 3]); //動態賦值4.layui 日期插件laydate 閃沒 問題
問題描述：當頁面高度不夠時（高度不夠，指的是 input輸入框下面的頁面高度 小於 時間控件的高度），時間控件，點擊以后 會閃沒，當退出頁面 ，再返回以后，時間控件正常出現；
解決方法：
將觸發 方法 改為 click
laydate.render({
elem: '#birthLeader'
,trigger: 'click'
});
效果：無論是否 高度足夠，均可以出現 控件 ，當高度不夠時，會遮擋 input輸入框
5.layui圖片上傳
看需求 ，是否 同步還是異步上傳
1.異步上傳 點擊上傳照片 按鈕 就上傳到服務器，返回線上圖片地址，等提交表單提交的時候 ，將其它表單信息 和 圖片的線上地址 一起提交
var uploadLeader = upload.render({
elem: '#upMan' //綁定元素
,accept:'images'
// ,auto:'false'
,auto:'true' //默認為true ，異步提交
,url:'/upfile/img'
,size:'1024' //限制 kb
,before: function(obj){ //obj參數包含的信息，跟 choose回調完全一致，可參見上文。
layer.load(); //上傳loading
}
,choose:function (obj) {
//將每次選擇的文件追加到文件隊列
var files = obj.pushFile();
//預讀本地文件，如果是多文件，則會遍歷。(不支持ie8/9)
obj.preview(function(index, file, result) {
// console.log(index); //得到文件索引
// console.log(file); //得到文件對象
// console.log(result); //得到文件base64編碼，比如圖片
//下面這個只是為了操作畫面 並沒有上傳 應該上傳成功以后 執行 done中執行
$('#upMan').parents('.add-img-box ').find('img').attr('src',result)
})
}
,done: function(res){
layer.closeAll('loading'); //關閉loading
//上傳完畢回調
//將圖片替換為上傳的圖片
$('#upMan').parents('.add-img-box ').find('img').attr('src',res.data)
}
,error: function(){
layer.closeAll('loading'); //關閉loading
//請求異常回調
}
});
2.同步提交 ，點擊上傳照片，后 僅僅 將圖片的base64格式 存儲下來，並不掉接口，等表單提交的時候，將其他表單信息以及圖片的base64 字符串 一起提交
var uploadLeader = upload.render({
elem: '#upMan' //綁定元素
,accept:'images'
,auto:'false'
,size:'1024' //限制 kb
,choose:function (obj) {
//將每次選擇的文件追加到文件隊列
var files = obj.pushFile();
//預讀本地文件，如果是多文件，則會遍歷。(不支持ie8/9)
obj.preview(function(index, file, result) {
// console.log(index); //得到文件索引
// console.log(file); //得到文件對象
// console.log(result); //得到文件base64編碼，比如圖片
//下面這個只是為了操作畫面 並沒有上傳 應該上傳成功以后 執行 done中執行
$('#upMan').parents('.add-img-box ').find('img').attr('src',result)
})
}
});
6.layer.open 彈框 出現 object object
layer.open({
title: '添加團隊團員'
,area: ['400px','520px']
,btn: []
,content: $('#form-box')
當content為一個 dom元素的時候，彈出框出現異常
解決辦法： 將type設置為 1,內容就正常了
layer.open({
title: '添加團隊團員'
,type:1
,area: ['400px','520px']
,btn: []
,content: $('#form-box')
});
7.彈出框 不居中問題
正常情況下，彈出框 默認是居中的位置（在沒有offset的情況下），現在 遇到一個問題，彈出框 水平居中，高度偏下，解決辦法
1.動態改變位置
layer.style(index 的值 彈出框 唯一標識, {
top: '50%',
transform:'translateY(-50%)'
});
2.由於彈出框 fixed,定位，但是 內容高度 獲取不對，此時 給body添加 ，height:100%;也可以解決
8.關於頁面layer報錯
有很多時候，這個頁面不需要用到layui的form,table，或者其他模塊，所以
不引用 這些模塊
layui.use(['form','laydate','upload'], function(){代碼}）
，但需要用到layer模塊，此時 直接調用會報錯
<script src="layui/layui.js"></script>
<script>
$('.dele').click(function () {
layer.open({
title: '在線調試'
,content: '可以填寫任意的layer代碼'
});
})
</script>
而在有引用 form,table等模塊的時候，直接調用並不會報錯，能夠正常使用
這是因為，模塊之間的相互依賴，當引用這些功能性模塊的時候，會自動引用layer，但是當不使用其他模塊的時候，只需要layer的時候需要 單獨引入 ，像下面這樣
layui.use(['layer']); $('.dele').click(function () { layer.open({ title: 'test' ,content: '可以填寫任意的layer代碼' }); })
就不會報錯了
8.關於lay-search 屬性 英文區分大小寫的問題
<select name="Nationality" lay-search lay-filter="nationality">
<option value="中國">中國</option>
<option value="其他">其他</option>
</select>
layui提供搜索功能，切搜索是根據option的text而不是value值，這樣很便捷，但是layui這里對於英文來說是區分大小寫的，所以 英文輸入的時候 不太便捷 需要修改源碼進行優化
在layui.all.js和form.js中 搜索 無匹配項，修改兩處 轉為大寫 此時 就會不區分大小寫了
9.laydate無法正常顯示的問題，
laydate接受的格式默認為 datetime類型下 為：yyyy-MM-dd HH:mm:ss，當數據庫數據為 yyyy-MM-dd HH:mm的時候 ，會由於格式不正確，而導致無法正常顯示的問題
laydate.render({
elem: '#goTime',
type:'datetime',
format:'yyyy-MM-dd HH:mm'
});
解決辦法：1.在讀數據的時候，動態判斷並修改格式為統一
2.前后台，數據保持統一性，防止此類問題發生
10.上傳圖片 當重復提交同一個圖片 無法再次吊起（ input file也是一樣）
解決辦法：
<1>. 當圖片是異步上傳 可以在選擇上傳完 對文件隊列 進行刪除
, choose: function (obj) {
var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
}
, done: function (res, index, upload) {
alert(index);
layer.msg('添加失敗！');
//var files = upload.pushFile();
delete this.files[index]
//console.log(res)
}
<2>.修改源碼 當單個圖片是異步上傳 可以在選擇上傳完 對文件隊列 進行清空
<3>當圖片是同步上傳，上傳完成后，需要保存 ，等待和form一起提交 ，就不可以 清空，或者 利用兩個input進行提交
var imgUpload=upload.render({
elem: '#upMan' //綁定元素
,accept:'file'
,auto:false
// ,size:'1024' //限制 kb
,choose:function (obj) {
//將每次選擇的文件追加到文件隊列
var files = obj.pushFile();
//預讀本地文件，如果是多文件，則會遍歷。(不支持ie8/9)
obj.preview(function(index, file, result) {
common.clearError('headImg')
if(common.isImg(file.name)){
//新增 圖片裁剪
if(file.size<common.imgSzieMax && file.size>common.imgSzieMin ){
//新增 圖片裁剪
$(".dialog").show();
$('#image').cropper('destroy').attr('src', result).cropper({
aspectRatio: 377/472, // 縱橫比
viewMode: 1,
guides: false,
});
$(".finish").on('click', function () {
//確定裁剪
crop();
$(".dialog").hide();
});
$(".cancle").on('click', function () {
//裁剪取消
crop_cancle();
$(".dialog").hide();
});
// $('#headImg').val(result);
// $('#upMan').parents('.add-img-box ').find('img').attr('src',result)
//新增 圖片裁剪
}else{
common.nameEroor($('#headImg'),'文件大小必須在50k和350k之間!',)
common.errorAlert('文件大小必須在50k和350k之間!')
}
//新增 圖片裁剪
}else{
common.nameEroor($('#headImg'),'僅支持jpg圖片格式!')
common.errorAlert('僅支持jpg圖片格式!')
}
})
imgUpload.config.elem.next()[0].value = ''
}
});
提供一個博客 寫過相關解決辦法 以供參考 地址
11.日期范圍 動態切換問題
laydate 提供了 日期范圍 可以選擇，不過正常需求中，日期范圍一般都是 動態可變的 ，所以 來寫一下實現這個的方法
//兩個時間綁定
var startDate=laydate.render({
elem:'#intime'
,trigger: 'click'
,min: '2019-10-06'
,max: '2019-10-07'
,done: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
if($('#outtime').val().replace(/\-/g,'')<=$('#intime').val().replace(/\-/g,'')){
var index=layer.open({
title: '警告'
,content: '入住時間不能比離開時間晚'
,yes: function(index, layero){
//關閉彈框
layer.close(index);
$('#intime').val('')
}
});
}else{
// 根據選中的值 獲取數據 重新渲染頁面
homeSurplus()
}
}
});
//重新設置 最大值 最小值 並重新渲染
function timeMaxMinChange(startDateMin,startDateMax){
//注意，月份是從 0開始 到11
startDate.config.min ={
year:timeForm(endDateMIn).year,
month:timeForm(endDateMIn).month,
date: timeForm(endDateMIn).date,
hours: 0,
minutes: 0,
seconds : 0
};
startDate.config.max ={
year:timeForm(endDateMax).year,
month:timeForm(endDateMax).month,
date: timeForm(endDateMax).date,
hours: 0,
minutes: 0,
seconds : 0
};
}
2020-04-16補充
12.laydate 只取時分 hh:mm 不要時分秒 hh:mm:ss
需要更改
在css最下面添加
/*隱藏秒*/
.laydate-time-list {
padding-bottom: 0;
overflow: hidden
}
/*時分 寬度 */
.laydate-time-list>li {
width: 50%
}
js 確保 可讀可寫（當設置為hh:mm:ss 而接受的數據是hh:mm形式的情況下 不會回顯 所以必須保持一致性）
laydate.render({
elem: '#comeTime1',
type: 'time',
format: 'HH:mm'
, trigger: 'click'
});
效果
