标签组件

标签概述

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

输入框模式

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

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

• 参数：

name=tags|1|1

`tags`：组件名称`tags`,此字段对应实体对象中的字段tags;
`第一个1`：代表这个标签组件是否必填，1必填 2不必填；
`第二个1`：这个参数表示标签组件不同的模式，1这里代表的就是输入框模式；

• 组件使用

标签组件的使用时直接在表单中引入就好，无其他操作：

<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>

• 效果展示：

  

无边框模式

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

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

• 参数：

name=tags|1|2

`tags`：组件名称`tags`,此字段对应实体对象中的字段tags;
`1`：代表这个标签组件是否必填，1必填 2不必填；
`2`：这个参数表示标签组件不同的模式，2这里代表的就是无边框模式；

• 组件使用

标签组件的使用时直接在表单中引入就好，无其他操作：

<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>

• 效果展示：

  

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删除模式；

• 组件使用

标签组件的使用时直接在表单中引入就好，无其他操作：

<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>

• 效果展示：

  

标签选择模式

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

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

• 参数：

name=tags|1|4

`tags`：组件名称`tags`,此字段对应实体对象中的字段tags;
`1`：代表这个标签组件是否必填，1必填 2不必填；
`4`：这个参数表示标签组件不同的模式，4这里代表的就是标签选择模式；

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>

• 效果展示：