Skip to content

InputTag 标签输入框

规则

基础示例

Props 配置示例

限制数量与可清空

折叠标签与悬停展示全部

分隔符与失焦保存

可拖拽与标签样式

禁用与只读对比

Events 事件示例

与数量上限联动(inject)

完整配置项:Element_InputTag

valuearray,元素为各标签的字符串(或组件支持的标签值类型)。

Props

名称说明类型默认值
modelValue / value绑定值(标签列表)array
max最大标签数number
tagType标签类型stringinfo
tagEffect标签效果stringlight
effect折叠等场景下 Tooltip 主题,如 darklight 或自定义stringlight
trigger触发新增标签的按键stringEnter
draggable是否可拖动排序booleanfalse
delimiter匹配到分隔符时自动拆成多个标签string / RegExp
size输入框尺寸string
collapseTags多选时是否折叠为文字展示booleanfalse
collapseTagsTooltip折叠时悬停是否展示全部标签(需 collapseTags 为 true)booleanfalse
maxCollapseTags折叠时最多展示的标签个数(需 collapseTags 为 true)number1
saveOnBlur失焦是否将当前输入保存为标签booleantrue
clearable是否显示清除按钮booleanfalse
clearIcon自定义清除图标string / object内置图标
disabled是否禁用booleanfalse
validateEvent是否触发表单校验booleantrue
readonly是否只读booleanfalse
autofocus是否自动聚焦booleanfalse
id原生 idstring
tabindex原生 tabindexstring / number
maxlength原生 maxlengthstring / number
minlength原生 minlengthstring / number
placeholder占位文本string
autocomplete原生 autocompletestringoff
ariaLabel原生 aria-labelstring

Events

名称说明类型
change绑定值变化Function
input输入过程中值变化Function
add-tag新增标签时触发Function
remove-tag移除标签时触发Function
drag-tag拖拽标签时触发Function
focus获得焦点Function
blur失去焦点Function
clear点击清除按钮Function

Slots

名称说明
tag自定义单个标签的展示内容
prefix输入区域前置内容
suffix输入区域后置内容

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用