InputTag 输入标签
InputTag 组件允许用户将内容添加为标签。
基础用法
按下 Enter 键将输入添加为标签。
自定义触发方式
您可以自定义用于触发输入标签的键。默认键是 Enter。
最大标签数
您可以设置可添加标签数量的限制。
折叠标签 2.11.0
使用 collapse tags 属性将它们合并成一段文本。 您可以使用 collapse tags tooltip 属性来启用鼠标悬停在折叠文本上以显示特定选定值的行为。 使用 collapse tags tooltip 属性将使 max 属性无效。
禁用状态
您可以将 InputTag 设置为禁用。
可清空
您可以设置是否显示清除按钮。
自定义清除图标 2.11.0
您可以通过设置 `clear-icon` 属性来自定义清除图标。
可拖拽
您可以设置标签是否可以拖动。
分隔符 2.9.9
您可以在匹配分隔符时添加标签。
尺寸
添加 size 属性来改变 InputTag 的尺寸。除了默认尺寸外,还有另外两个选项:large 和 small。
自定义标签
您可以通过 tag 插槽自定义标签内容。
自定义前缀和后缀
您可以通过 prefix 和 suffix 插槽自定义 InputTag 的前缀和后缀。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | array | — |
| max | 可以输入的最大标签数 | number | — |
| tag-type | 标签类型 | 枚举 | 信息 |
| 标签效果 | 标签效果 | 枚举 | light |
| trigger | 触发输入标签的键 | 枚举 | 回车 |
| draggable | 标签是否可以拖动 | boolean | false |
| 分隔符 2.9.9 | 匹配分隔符时添加标签 | string / regex | — |
| size | 输入框尺寸 | 枚举 | — |
| 折叠标签 2.11.0 | 多选时是否将选中值按文字的形式展示 | boolean | false |
| 折叠标签提示 2.11.0 | 当鼠标悬停在折叠标签的文本上时是否显示所有选定的标签。要使用此功能,collapse-tags 必须为 true | boolean | false |
| 失焦时保存 2.9.7 | 当输入框失去焦点时是否保存输入值 | boolean | true |
| 可清空 | 是否显示清除按钮 | boolean | false |
| 清除图标 2.11.0 | 自定义清除图标组件 | string / object | CircleClose |
| disabled | 是否禁用输入标签 | boolean | false |
| validate-event | 是否触发表单验证 | boolean | true |
| 只读 | 与原生输入框的 `readonly` 相同 | boolean | false |
| 自动聚焦 | 与原生输入框的 `autofocus` 相同 | boolean | false |
| id | 与原生 input 的 `id` 属性相同 | string | — |
| tabindex | 与原生输入中的 tabindex 相同 | string / number | — |
| 最大折叠标签数 2.11.0 | 要显示的最大标签数。要使用此功能,collapse-tags 必须为 true | number | 1 |
| 最大长度 | 与原生输入框的 `maxlength` 相同 | string / number | — |
| 最小长度 | 与原生输入框的 `minlength` 相同 | string / number | — |
| 占位符 | 输入框占位文本 | string | — |
| 自动补全 | 与原生输入框的 `autocomplete` 相同 | string | off |
| aria-label 无障碍 | 原生 aria-label 属性 | string | — |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 当 modelValue 改变时触发 | Function |
| input | 当输入值改变时触发 | Function |
| 添加标签 | 当添加标签时触发 | Function |
| remove-tag | 当移除标签时触发 | Function |
| 拖拽标签 2.11.3 | 当拖拽标签时触发 | Function |
| focus | 当 InputTag 获得焦点时触发 | Function |
| blur | 当 InputTag 失去焦点时触发 | Function |
| clear | 当点击清除图标时触发 | Function |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| tag | 作为标签的内容 | object |
| prefix | 作为 InputTag 前缀的内容 | — |
| suffix | 作为 InputTag 后缀的内容 | — |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| focus | 使输入框元素聚焦 | Function |
| blur | 使输入框元素失焦 | Function |