# 标签组件

# 标签概述

标签一词大家应该都不陌生,比如说张三是一个非常性格开朗的人,李四是一个非常幽默风趣的人,这些其实都是属于标签的范畴,给一定商品设置标签,或者给一个人设置标签,因此在我们的程序开发中,也会常常用到自定义标签的功能,比如给系统用户设置个性化标签,鉴于现实的场景,因为在框架开发中封装了标签组件,根据场景不同开发了多种标签模式,下面我们会逐一给大家详细的介绍;

# 输入框模式

顾名思义,输入框模式就是在输入框中输入时默认会形成一个独立的小标签,标签内容可以自定义。

  • 组件:<widget:tagsInput name="tags|1|1" th:value="${info['tags']}"/>

  • 参数:

name=tags|1|1

`tags`:组件名称`tags`,此字段对应实体对象中的字段tags;
`第一个1`:代表这个标签组件是否必填,1必填 2不必填;
`第二个1`:这个参数表示标签组件不同的模式,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>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure

# 无边框模式

顾名思义,输入框模式就是在输入框中输入时默认会形成一个独立的小标签,标签内容可以自定义。

  • 组件:<widget:tagsInput name="tags|1|2" th:value="${info['tags']}"/>

  • 参数:

name=tags|1|2

`tags`:组件名称`tags`,此字段对应实体对象中的字段tags;
`1`:代表这个标签组件是否必填,1必填 2不必填;
`2`:这个参数表示标签组件不同的模式,2这里代表的就是无边框模式;
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|2" th:value="${info['tags']}"/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure

# 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删除模式;
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|3" th:value="${info['tags']}"/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure

# 标签选择模式

这种模式中,当输入标签时会自动下拉展示标签组件所提供的集中固定的标签,可以从中选择所需要的标签。

  • 组件:<widget:tagsInput name="tags|1|4" data="['很有想法的','专注设计','大长腿','川妹子','海纳百川']" th:value="${info['tags']}"/>

  • 参数:

name=tags|1|4

`tags`:组件名称`tags`,此字段对应实体对象中的字段tags;
`1`:代表这个标签组件是否必填,1必填 2不必填;
`4`:这个参数表示标签组件不同的模式,4这里代表的就是标签选择模式;
1
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>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure