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 的尺寸。除了默认尺寸外,还有另外两个选项:largesmall

自定义标签

您可以通过 tag 插槽自定义标签内容。

自定义前缀和后缀

您可以通过 prefixsuffix 插槽自定义 InputTag 的前缀和后缀。

API

属性

名称描述类型默认值
model-value / v-model绑定值array
max可以输入的最大标签数number
tag-type标签类型枚举信息
标签效果标签效果枚举light
trigger触发输入标签的键枚举回车
draggable标签是否可以拖动booleanfalse
分隔符 2.9.9匹配分隔符时添加标签string / regex
size输入框尺寸枚举
折叠标签 2.11.0多选时是否将选中值按文字的形式展示booleanfalse
折叠标签提示 2.11.0当鼠标悬停在折叠标签的文本上时是否显示所有选定的标签。要使用此功能,collapse-tags 必须为 truebooleanfalse
失焦时保存 2.9.7当输入框失去焦点时是否保存输入值booleantrue
可清空是否显示清除按钮booleanfalse
清除图标 2.11.0自定义清除图标组件string / objectCircleClose
disabled是否禁用输入标签booleanfalse
validate-event是否触发表单验证booleantrue
只读与原生输入框的 `readonly` 相同booleanfalse
自动聚焦与原生输入框的 `autofocus` 相同booleanfalse
id与原生 input 的 `id` 属性相同string
tabindex与原生输入中的 tabindex 相同string / number
最大折叠标签数 2.11.0要显示的最大标签数。要使用此功能,collapse-tags 必须为 truenumber1
最大长度与原生输入框的 `maxlength` 相同string / number
最小长度与原生输入框的 `minlength` 相同string / number
占位符输入框占位文本string
自动补全与原生输入框的 `autocomplete` 相同stringoff
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

来源

组件样式文档

贡献者