InputTag 标签输入框
规则
基础示例
Props 配置示例
限制数量与可清空
折叠标签与悬停展示全部
分隔符与失焦保存
可拖拽与标签样式
禁用与只读对比
Events 事件示例
与数量上限联动(inject)
完整配置项:Element_InputTag
value:array,元素为各标签的字符串(或组件支持的标签值类型)。
Props
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue / value | 绑定值(标签列表) | array | — |
| max | 最大标签数 | number | — |
| tagType | 标签类型 | string | info |
| tagEffect | 标签效果 | string | light |
| effect | 折叠等场景下 Tooltip 主题,如 dark、light 或自定义 | string | light |
| trigger | 触发新增标签的按键 | string | Enter |
| draggable | 是否可拖动排序 | boolean | false |
| delimiter | 匹配到分隔符时自动拆成多个标签 | string / RegExp | — |
| size | 输入框尺寸 | string | — |
| collapseTags | 多选时是否折叠为文字展示 | boolean | false |
| collapseTagsTooltip | 折叠时悬停是否展示全部标签(需 collapseTags 为 true) | boolean | false |
| maxCollapseTags | 折叠时最多展示的标签个数(需 collapseTags 为 true) | number | 1 |
| saveOnBlur | 失焦是否将当前输入保存为标签 | boolean | true |
| clearable | 是否显示清除按钮 | boolean | false |
| clearIcon | 自定义清除图标 | string / object | 内置图标 |
| disabled | 是否禁用 | boolean | false |
| validateEvent | 是否触发表单校验 | boolean | true |
| readonly | 是否只读 | boolean | false |
| autofocus | 是否自动聚焦 | boolean | false |
| id | 原生 id | string | — |
| tabindex | 原生 tabindex | string / number | — |
| maxlength | 原生 maxlength | string / number | — |
| minlength | 原生 minlength | string / number | — |
| placeholder | 占位文本 | string | — |
| autocomplete | 原生 autocomplete | string | off |
| ariaLabel | 原生 aria-label | string | — |
Events
| 名称 | 说明 | 类型 |
|---|---|---|
| change | 绑定值变化 | Function |
| input | 输入过程中值变化 | Function |
| add-tag | 新增标签时触发 | Function |
| remove-tag | 移除标签时触发 | Function |
| drag-tag | 拖拽标签时触发 | Function |
| focus | 获得焦点 | Function |
| blur | 失去焦点 | Function |
| clear | 点击清除按钮 | Function |
Slots
| 名称 | 说明 |
|---|---|
| tag | 自定义单个标签的展示内容 |
| prefix | 输入区域前置内容 |
| suffix | 输入区域后置内容 |


