layui 第三方组件平台

返回首页

输入回车生成标签

创建:2021-5-2

文档

原组件inputTags:/extend/inputTags/

在使用过程中发现一些选择器存在局限性问题,于是进行了修改;以及功能做了一些增强,使其更加满足使用需求。

主要增强功能包含两点:

1.增加openFlatContent、flatContent属性:原组件使用时,当一个页面存在多个inputTags时,只能保证每个inputTags的content中的元素不重复,无法保证多个inputTags的content中的元素不重复。
使用:只需在渲染时将openFlatContent设置为true即可。openFlatContent为true代表使用flatContent,多个开启了flatContent的inputTags的元素不能重复,反之代表不使用flatContent,可以与其他inputTags包含相同元素;可以通过inputTags.flatContent获取flatContent。

2.增加pinArray属性:原组件使用时,生成的tags都有close按钮,而需求有时包含一些内置内容,强制要求包含时,只需在inputTags渲染时将需要需要内置的内容加入至pinArray即可,多个inputTags的pinArray相互独立。

使用截图:
渲染代码

初次加载

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> 一级结构</label>
<div class="layui-input-block tags">
<input class="layui-input " type="text" id="phase" placeholder="回车生成标签" 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> 二级结构</label>
<div class="layui-input-block tags">
<input class="layui-input" type="text" id="building" placeholder="回车生成标签" 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> 三级结构</label>
<div class="layui-input-block tags">
<input class="layui-input" type="text" id="unit" placeholder="回车生成标签" autocomplete="off"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" type="button" id="test">测试</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: ['栋','号楼'],
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;
}
})
});

下载

去码云下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。