# input-tag (w-input-tag)

- **Import**: `WInputTag` from `win-design-next`
- **Tag**: `<w-input-tag>`
- **说明**: InputTag 标签输入框
- **分类**: data-entry
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/input-tag.md`

## API

## API

### 属性

| 名称                  | 详情                         | 类型                                                                                | 默认    |
| --------------------- | ---------------------------- | ----------------------------------------------------------------------------------- | ------- |
| model-value / v-model | 绑定值                       | ^[array]`string[]`                                                                  | —       |
| max                   | 可添加标签的最大数量         | ^[number]                                                                           | —       |
| tag-type              | 标签类型                     | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'error' \| 'primary'` | primary |
| tag-effect            | 标签效果                     | ^[enum]`'' \| 'light' \| 'dark' \| 'plain'`                                         | light   |
| trigger               | 触发输入标签的按键           | ^[enum]`'Enter' \| 'Space'`                                                         | Enter   |
| draggable             | 是否可以拖动标签             | ^[boolean]                                                                          | false   |
| size                  | 输入框尺寸                   | ^[enum]`'large' \| 'default' \| 'small' \| 'mini'`                                  | default |
| clearable             | 是否显示清除按钮             | ^[boolean]                                                                          | false   |
| disabled              | 是否禁用                     | ^[boolean]                                                                          | false   |
| validate-event        | 是否触发表单验证             | ^[boolean]                                                                          | true    |
| readonly              | 等价于原生 readonly 属性     | ^[boolean]                                                                          | false   |
| autofocus             | 等价于原生 autofocus 属性    | ^[boolean]                                                                          | false   |
| id                    | 等价于原生 input id 属性     | ^[string]                                                                           | —       |
| tabindex              | 等价于原生 tabindex 属性     | ^[string] / ^[number]                                                               | —       |
| maxlength             | 等价于原生 maxlength 属性    | ^[string] / ^[number]                                                               | —       |
| minlength             | 等价于原生 minlength 属性    | ^[string] / ^[number]                                                               | —       |
| placeholder           | 输入框占位文本               | ^[string]                                                                           | —       |
| autocomplete          | 等价于原生 autocomplete 属性 | ^[string]                                                                           | off     |
| aria-label ^(a11y)    | 等价于原生 aria-label 属性   | ^[string]                                                                           | —       |

### 事件

| 名称       | 详情                    | 类型                                     |
| ---------- | ----------------------- | ---------------------------------------- |
| change     | 绑定值变化时触发的事件  | ^[Function]`(value: string[]) => void`   |
| input      | 在 Input 值改变时触发   | ^[Function]`(value: string) => void`     |
| add-tag    | tag 被添加时触发        | ^[Function]`(value: string) => void`     |
| remove-tag | tag 被移除时触发        | ^[Function]`(value: string) => void`     |
| focus      | 在 Input 获得焦点时触发 | ^[Function]`(event: FocusEvent) => void` |
| blur       | 在 Input 失去焦点时触发 | ^[Function]`(event: FocusEvent) => void` |
| clear      | 点击清除图标时触发      | ^[Function]`() => void`                  |

### Slots

| 名称   | 详情              | 类型                                        |
| ------ | ----------------- | ------------------------------------------- |
| tag    | 作为 tag 的内容   | ^[object]`{ value: string, index: number }` |
| prefix | InputTag 头部内容 | —                                           |
| suffix | InputTag 尾部内容 | —                                           |

### 对外暴露的方法

| 名称  | 详情              | 类型                    |
| ----- | ----------------- | ----------------------- |
| focus | 使 input 获取焦点 | ^[Function]`() => void` |
| blur  | 使 input 失去焦点 | ^[Function]`() => void` |
