# 标签组件
# 标签概述
标签
一词大家应该都不陌生,比如说张三是一个非常性格开朗
的人,李四是一个非常幽默风趣
的人,这些其实都是属于标签的范畴,给一定商品设置标签,或者给一个人设置标签,因此在我们的程序开发中,也会常常用到自定义标签的功能,比如给系统用户设置个性化标签,鉴于现实的场景,因为在框架开发中封装了标签组件
,根据场景不同开发了多种标签模式,下面我们会逐一给大家详细的介绍;
# 输入框模式
顾名思义,输入框模式就是在输入框中输入时默认会形成一个独立的小标签,标签内容可以自定义。
组件:
<widget:tagsInput name="tags|1|1" th:value="${info['tags']}"/>
参数:
name=tags|1|1
`tags`:组件名称`tags`,此字段对应实体对象中的字段tags;
`第一个1`:代表这个标签组件是否必填,1必填 2不必填;
`第二个1`:这个参数表示标签组件不同的模式,1这里代表的就是输入框模式;
2
3
- 组件使用
标签组件的使用时直接在表单中引入就好,无其他操作:
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">个性标签:</label>
<div class="layui-input-inline">
<widget:tagsInput name="tags|1|1" th:value="${info['tags']}"/>
</div>
</div>
</form>
2
3
4
5
6
7
8
- 效果展示:
# 无边框模式
顾名思义,输入框模式就是在输入框中输入时默认会形成一个独立的小标签,标签内容可以自定义。
组件:
<widget:tagsInput name="tags|1|2" th:value="${info['tags']}"/>
参数:
name=tags|1|2
`tags`:组件名称`tags`,此字段对应实体对象中的字段tags;
`1`:代表这个标签组件是否必填,1必填 2不必填;
`2`:这个参数表示标签组件不同的模式,2这里代表的就是无边框模式;
2
3
- 组件使用
标签组件的使用时直接在表单中引入就好,无其他操作:
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">个性标签:</label>
<div class="layui-input-inline">
<widget:tagsInput name="tags|1|2" th:value="${info['tags']}"/>
</div>
</div>
</form>
2
3
4
5
6
7
8
- 效果展示:
# BackSpace删除模式
这种模式中,当我们输入了一个错误的标签后,可以直接按BackSpace
进行重新输入,无需手动删除。
组件:
<widget:tagsInput name="tags|1|3" th:value="${info['tags']}"/>
参数:
name=tags|1|3
`tags`:组件名称`tags`,此字段对应实体对象中的字段tags;
`1`:代表这个标签组件是否必填,1必填 2不必填;
`3`:这个参数表示标签组件不同的模式,3这里代表的就是BackSpace删除模式;
2
3
- 组件使用
标签组件的使用时直接在表单中引入就好,无其他操作:
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">个性标签:</label>
<div class="layui-input-inline">
<widget:tagsInput name="tags|1|3" th:value="${info['tags']}"/>
</div>
</div>
</form>
2
3
4
5
6
7
8
- 效果展示:
# 标签选择模式
这种模式中,当输入标签时会自动下拉展示标签组件所提供的集中固定的标签,可以从中选择所需要的标签。
组件:
<widget:tagsInput name="tags|1|4" data="['很有想法的','专注设计','大长腿','川妹子','海纳百川']" th:value="${info['tags']}"/>
参数:
name=tags|1|4
`tags`:组件名称`tags`,此字段对应实体对象中的字段tags;
`1`:代表这个标签组件是否必填,1必填 2不必填;
`4`:这个参数表示标签组件不同的模式,4这里代表的就是标签选择模式;
2
3
data="['很有想法的','专注设计','大长腿','川妹子','海纳百川']"
data
中的参数这里是指定的数据源,当前页可以动态传入配置参数或者动态获取SQL数据源;
- 组件使用
标签组件的使用时直接在表单中引入就好,无其他操作:
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">个性标签:</label>
<div class="layui-input-inline">
<widget:tagsInput name="tags|1|5" data="['很有想法的','专注设计','大长腿','川妹子','海纳百川']" th:value="${info['tags']}"/>
</div>
</div>
</form>
2
3
4
5
6
7
8
- 效果展示: