我們都知道
layer.prompt官網(wǎng)上的例子是一個(gè)彈出框钦幔，那么有沒有可能出來多個(gè)呢，當(dāng)然是可以的
1.首先增加需要的輸入框
源碼不好改動(dòng)动漾，咱們可以直接js增加呀盔夜，$().append()方法還是很好用的
話不多說上代碼
layer.prompt({
formType: 2,
placeholder: '輸入注銷原因',
title: '請(qǐng)輸入值',
// area: ['800px', '350px'] //自定義文本域?qū)捀? }, function(value, index, elem){
// alert(value); //得到value
layer.close(index);
});
這個(gè)是官網(wǎng)上的例子相比都可以找得到，想要?jiǎng)討B(tài)加入內(nèi)容瘫筐，首先咱需要找準(zhǔn)目標(biāo)蜜暑，瀏覽器調(diào)試工具走起
可以發(fā)現(xiàn)代碼時(shí)分的簡(jiǎn)潔，這樣就更好添加了
這樣動(dòng)態(tài)增加的代碼也就出來了
$(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"輸入注銷人\"/>")
這里我增加了一個(gè)<input>輸入框策肝，給了一個(gè)id這樣使用的時(shí)候可以找的到肛捍，class就不要起名和自帶的一樣了，這里我用了一個(gè)layui的表單的元素之众，具體啥原因下邊分析到點(diǎn)擊確定的回調(diào)會(huì)說明拙毫。但是鑒于沒有<form>標(biāo)簽包裹 應(yīng)該然并卵。但是為了美觀還是中間空了一行棺禾，看看結(jié)果啥樣吧
可以發(fā)現(xiàn)鮮果還是不錯(cuò)的缀蹄，但是我感覺上邊的<textarea>中的value屬性不好，客戶要填寫時(shí)還得刪除帘睦，如果能像下邊的<input>標(biāo)簽就好了袍患，不過查閱了API沒有這么個(gè)屬性，得嘞竣付，修改下代碼吧诡延。
2.增加placeholder屬性
由于js文件都是壓縮的，咱們可以使用IDE格式化一下古胆，要不然頭都大了肆良。
代碼如下
稍微分析下，我們找到了主要的添加dom內(nèi)容的代碼
l = 2 == e.formType ? '<textarea class="layui-layer-input"' + a + ">" + (e.value || "") + "</textarea>" : function () {
return '<input type="' + (1 == e.formType ? "password" : "text") + '" class="layui-layer-input" value="' + (e.value || "") + '">'
}()
大概是說(本人js比較渣)：如果
formType屬性值為2添加<textarea>標(biāo)簽逸绎，否則調(diào)用一個(gè)函數(shù)惹恃，當(dāng)然這個(gè)函數(shù)也是為了返回其他的情況下的<input>標(biāo)簽,那咱都給添加下吧
添加的代碼如下：
placeholder="'+(e.placeholder || '')+'"
然后形成的代碼像這個(gè)樣子
代碼好些 主要就是看清楚這復(fù)雜的雙引號(hào)和單引號(hào)
這樣咱們就可以修改前端的代碼了
layer.prompt({
formType: 2,
placeholder: '輸入注銷原因',
title: '請(qǐng)輸入值',
// area: ['800px', '350px'] //自定義文本域?qū)捀? }, function(value, index, elem){
// alert(value); //得到value
layer.close(index);
});
$(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"輸入注銷人\"/>")
頁(yè)面效果如下圖
OK 大功告成。不過又出現(xiàn)了個(gè)問題棺牧，本來咋樣也該給咱個(gè)值的吧巫糙，但是沒填寫的時(shí)候發(fā)現(xiàn)，啥反應(yīng)都沒有颊乘，
代碼如下：
function(value, index, elem){
/* if(value===""){
layer.msg("請(qǐng)?zhí)顚懽N原因")
return;
}
*/
if($('#zxr').val()===""){
layer.tips("請(qǐng)?zhí)顚懽N人",$('#zxr'));
return;
}
// alert(value); //得到value
layer.close(index);
}
這就尷尬了参淹，控制臺(tái)也沒出錯(cuò)，應(yīng)該是代碼的問題了乏悄。
3.修改未填寫時(shí)的提示方式
再次找到剛才的那部分代碼：
就是這段yes函數(shù)了浙值，
yes: function (i) {
var n = s.val();
"" === n ? s.focus() : n.length > (e.maxlength || 500) ? r.tips("最多输入" + (e.maxlength || 500) + "个字数", s, {tips: 1}) : t && t(n, i, s)
}
握草，原來為空的時(shí)候檩小，就直接s.focus()了开呐，這個(gè)s，從上邊可以找到就是
success: function (e) {
s = e.find(".layui-layer-input"), s.focus(), "function" == typeof f && f(e)
}
就是自動(dòng)添加的那個(gè)輸入框嘛，這也就是咱們自己添加的輸入框的class不用layui-layer-input的原因了筐付，而且可以看出來這個(gè)success函數(shù)就是頁(yè)面加載好執(zhí)行的卵惦，這樣咱們其實(shí)也可以將添加自定義的輸入框的方法寫在success這個(gè)屬性中。這里就不試了瓦戚，見好就好哈哈鸵荠。
回到正題，既然找到了伤极，就修改下等于空時(shí)的函數(shù)吧，就在旁邊出來個(gè)tip吧姨伤。
修改后的代碼如下：
"" === n ? layer.tips(e.placeholder||'請(qǐng)?zhí)顚憙?nèi)容',s) : n.length > (e.maxlength || 500) ? r.tips("最多输入" + (e.maxlength || 500) + "个字数", s, {tips: 1}) : t && t(n, i, s)
主要就是這段了
layer.tips(e.placeholder||'請(qǐng)?zhí)顚憙?nèi)容',s)
也可以專門寫個(gè)屬性哨坪，設(shè)置沒填寫的提示。
完整頁(yè)面代碼如下：
layer.prompt({
formType: 2,
placeholder: '輸入注銷原因',
title: '請(qǐng)輸入值',
// area: ['800px', '350px'] //自定義文本域?qū)捀? }, function(value, index, elem){
/* if(value===""){
layer.msg("請(qǐng)?zhí)顚懽N原因")
return;
}
*/
if($('#zxr').val()===""){
layer.tips("請(qǐng)?zhí)顚懽N人",$('#zxr'));
return;
}
// alert(value); //得到value
layer.close(index);
});
$(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"輸入注銷人\"/>")
頁(yè)面效果如下：
然后再寫其他邏輯就可以啦
