layui 第三方組件平臺(tái)

返回首頁(yè) 發(fā)布組件

輸入回車生成標(biāo)簽

創(chuàng)建:2021-5-2

文檔

原組件inputTags:https://fly.layui.com/extend/inputTags/

在使用過(guò)程中發(fā)現(xiàn)一些選擇器存在局限性問(wèn)題,于是進(jìn)行了修改;以及功能做了一些增強(qiáng),使其更加滿足使用需求。

主要增強(qiáng)功能包含兩點(diǎn):

1.增加openFlatContent、flatContent屬性:原組件使用時(shí),當(dāng)一個(gè)頁(yè)面存在多個(gè)inputTags時(shí),只能保證每個(gè)inputTags的content中的元素不重復(fù),無(wú)法保證多個(gè)inputTags的content中的元素不重復(fù)。
使用:只需在渲染時(shí)將openFlatContent設(shè)置為true即可。openFlatContent為true代表使用flatContent,多個(gè)開啟了flatContent的inputTags的元素不能重復(fù),反之代表不使用flatContent,可以與其他inputTags包含相同元素;可以通過(guò)inputTags.flatContent獲取flatContent。

2.增加pinArray屬性:原組件使用時(shí),生成的tags都有close按鈕,而需求有時(shí)包含一些內(nèi)置內(nèi)容,強(qiáng)制要求包含時(shí),只需在inputTags渲染時(shí)將需要需要內(nèi)置的內(nèi)容加入至pinArray即可,多個(gè)inputTags的pinArray相互獨(dú)立。

使用截圖:
渲染代碼

初次加載

pinArray效果展示

flatContent效果展示



快速上手
HTML:
                        <form class="layui-form">
<div class="layui-field-box">
<div class="layui-form-item" style="width: 90%;margin-left: 5%">
<label class="layui-form-label mylabel" style="font-size: 15px;color: #ff6436"><i
class="iconfont"></i> 一級(jí)結(jié)構(gòu)</label>
<div class="layui-input-block tags">
<input class="layui-input " type="text" id="phase" placeholder="回車生成標(biāo)簽" autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-field-box">
<div class="layui-form-item" style="width: 90%;margin-left: 5%">
<label class="layui-form-label mylabel" style="font-size: 15px;color: #dca300"><i
class="iconfont"></i> 二級(jí)結(jié)構(gòu)</label>
<div class="layui-input-block tags">
<input class="layui-input" type="text" id="building" placeholder="回車生成標(biāo)簽" autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-field-box">
<div class="layui-form-item" style="width: 90%;margin-left: 5%">
<label class="layui-form-label mylabel" style="font-size: 15px;color: #63bf00"><i
class="iconfont"></i> 三級(jí)結(jié)構(gòu)</label>
<div class="layui-input-block tags">
<input class="layui-input" type="text" id="unit" placeholder="回車生成標(biāo)簽" autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" type="button" id="test">測(cè)試</button>
</div>
</div>
</form>
JS:
layui.use(['inputTags','form'], function () {
var inputTags = layui.inputTags;
$("#test").on("click",function (){
console.log(JSON.stringify(structShield))
console.log(inputTags.flatContent)
})

var structShield={
phase:[],
building:[],
unit:[]
}
inputTags.render({
elem:'#phase',
content: ['期'],
pinArray: ['期'],
openFlatContent: true,
aldaBtn: false,
done: function(){
structShield.phase=this.content;
}
})
inputTags.render({
elem:'#building',
content: ['棟'],
pinArray: ['棟','號(hào)樓'],
openFlatContent: false,
aldaBtn: false,
done: function(){
structShield.building=this.content;
}
})
inputTags.render({
elem:'#unit',
content: ['單元'],
pinArray: ['單元'],
openFlatContent: true,
aldaBtn: false,
done: function(){
structShield.unit=this.content;
}
})
});

下載

去碼云下載
該擴(kuò)展組件由第三方用戶主動(dòng)投遞,并由其自身進(jìn)行維護(hù),本站僅做收集。