Skip to content

InputTag 标签输入框 ​

规则 ​

基础示例 ​

Props 配置示例 ​

限制数量与可清空 ​

折叠标签与悬停展示全部 ​

分隔符与失焦保存 ​

可拖拽与标签样式 ​

禁用与只读对比 ​

Events 事件示例 ​

与数量上限联动(inject) ​

完整配置项:Element_InputTag

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

Props ​

名称说明类型默认值
modelValue / value绑定值(标签列表)array—
max最大标签数number—
tagType标签类型stringinfo
tagEffect标签效果stringlight
effect折叠等场景下 Tooltip 主题,如 dark、light 或自定义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 许可证发布,欢迎个人和企业用户免费使用