# inputTags增强版

**Repository Path**: xiehanhan/input-tags-enhanced

## Basic Information

- **Project Name**: inputTags增强版
- **Description**: 输入回车生成标签，并加入flatContent和pinArray增强属性
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 18
- **Forks**: 10
- **Created**: 2021-04-16
- **Last Updated**: 2024-12-30

## Categories & Tags

**Categories**: layui-components

**Tags**: None

## README

# inputTags增强版

#### 介绍
输入回车生成标签，并加入flatContent和pinArray增强属性

#### 使用说明
[原组件inputTags](https://fly.layui.com/extend/inputTags/) </br>
在使用过程中发现一些选择器存在局限性问题，于是进行了修改；以及功能做了一些增强，使其更加满足使用需求。</br>
主要增强功能包含两点：  
1. 增加openFlatContent、flatContent属性：原组件使用时，当一个页面存在多个inputTags的容器（input）时，只能保证每个input的content中的tag不重复，无法保证多个input的content中的tag不重复。
    - 使用：只需在渲染时将openFlatContent设置为true即可。
    - openFlatContent为true代表使用flatContent,多个开启了flatContent的input中的tag不能重复
    - 反之代表不使用flatContent，可以与其他input包含相同tag；
    - 可以通过inputTags.config.flatContent获取flatContent。  
2. 增加pinArray属性：原组件使用时，生成的tags都有close按钮，而需求有时包含一些内置内容，强制要求包含时。
    - 只需在inputTags渲染时将需要需要内置的内容加入至pinArray即可，多个input的pinArray相互独立。


#### 使用效果

##### 渲染代码
![渲染代码](https://images.gitee.com/uploads/images/2021/0416/113207_d2aa08a5_5456208.png "5.png")

---

##### 初次加载
>初次加载 会将input中content的tags加载出来

![初次加载](https://images.gitee.com/uploads/images/2021/0416/113221_85234559_5456208.png "1.png")

---

##### pinArray效果展示
>在上面的渲染代码中，二级结构的pinArray包含'栋'、'号楼'两个元素，所以渲染出来的tags没有close按钮；反之'测试栋'，不在其中，所以有close按钮

![pinArray效果展示](https://images.gitee.com/uploads/images/2021/0416/113233_84a6fba4_5456208.png "2.png")

---

##### flatContent效果展示
>如上面渲染代码所示，我们给一级结构和三级结构的openFlatContent设置为true，二级结构的openFlatContent设置为false。所以，当我们在一级结构已经生成了一个'测试期'的tag后：
>- 在二级结构的input中输入'测试期'，回车`可以`生成tag
>- 在三级结构的input中输入'测试期'，回车`不能`生成tag

![flatContent效果展示](https://images.gitee.com/uploads/images/2021/0416/113446_1bd3813f_5456208.gif "00.gif")

#### 去Pages体验一下
https://xiehanhan.gitee.io/input-tags-enhanced

#### 安装教程

引入组件和具体例子可以参考
https://gitee.com/xiehanhan/input-tags-enhanced/tree/master/example

快速上手</br>
HTML：
```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:

```javascript
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;
        }
    })
});
```



#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request