# layui-input-tags

**Repository Path**: dpf-admin/layui-input-tags

## Basic Information

- **Project Name**: layui-input-tags
- **Description**: layui的inputTag扩展插件
- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-27
- **Last Updated**: 2026-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 一、页面引入

> 通过js路径方式引入

``` <script src="./inputTag.js"></script>```

> 通过layui扩展模块引入

``` javascript
 layui.extend({        
        inputTag: './inputTag'
    }) ;
```

### 二、使用方式

> HTML

```<input type="text" name="tags" id="tags" autocomplete="off">```

> JS渲染

```javascript
layui.use(['inputTag', 'jquery'], function(){
  const inputTag = layui.inputTag;
  const $ = layui.jquery;

  // 渲染组件
  const tagInstance = inputTag.render({
    elem: '#tags',          // 绑定元素
    width: '400px',         // 宽度（支持 300px / 100%）
    enterAdd: true,         // 是否开启回车添加标签
    value: [                // 初始值（对象数组格式）
      { label: '标签一', value: '1001' },
      { label: '标签二', value: '1002' }
    ],
    // 删除标签回调
    onDelete: function(newTags){
      console.log('删除后最新标签：', newTags);
    },
    // 清空标签回调
    onClear: function(){
      console.log('标签已全部清空');
    }
  });
});
```

### 三、配置参数说明

| 参数名       | 类型         | 默认值 | 说明                                                         |
| ------------ | ------------ | ------ | ------------------------------------------------------------ |
| **elem**     | string/DOM   | -      | **必选**，绑定输入框选择器                                   |
| **width**    | string       | 100%   | 组件宽度，如 `300px`、`500px`、`100%`                        |
| **enterAdd** | boolean      | true   | 是否开启**回车添加标签**true：可手动输入添加false：只读，仅支持动态添加 |
| **value**    | array/string | []     | 初始标签值对象数组：`[{label,value}]`字符串：`'标签1,标签2'` |
| **onDelete** | function     | -      | 删除单个标签时触发**返回：删除后的标签对象**             |
| **onClear**  | function     | -      | 一键清空所有标签时触发                                       |

### 四、实例方法

#### 4.1动态添加标签

```javascript
// 添加字符串（自动转成 {label,value}） 
tagInstance.addTag('新标签'); 
// 添加对象（推荐） 
tagInstance.addTag({  label: '动态标签',  value: 'tag_2026' });
```

#### 4.2获取所有标签

```javascript
const list = tagInstance.getValue();
console.log(list); 
// 输出：[{label: 'xxx', value: 'xxx'}, ...]
```

### 4.3一键清空所有标签

```javascript
tagInstance.clear()
```