搜索组件...⌘K

InputTag 标签输入框

用于输入标签，按回车添加，支持最大数量、自定义样式、分隔符等。

基础用法

按回车添加标签，按退格键删除最后一个标签：

Vue×Nuxt×

标签：Vue, Nuxt

不同尺寸

设置 size 属性使用三种预设尺寸：

Small×

Medium×

Large×

最大标签数

设置 max 限制标签数量，超出后折叠显示：

JavaScript×TypeScript×Vue×

已添加 3 个（最多 5 个）

自定义标签样式

使用 tag-style 自定义标签外观：

Node.js×Express×

Bug×Fix×

分隔符

设置 separator 支持批量输入，例如用逗号分隔：

HTML×CSS×

标签：HTML, CSS

允许重复

设置 unique 为 false 允许添加重复标签：

Tag×

禁用与只读

设置 disabled 禁用或 readonly 只读：

只读标签不可编辑

只读标签不可编辑

事件回调

监听 add 和 remove 事件：

日志：

Props

参数	类型	默认值	说明
`modelValue`	`string[]`	`[]`	标签数组（v-model）
`placeholder`	`string`	`'请输入后按回车'`	占位文本
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`disabled`	`boolean`	`false`	是否禁用
`readonly`	`boolean`	`false`	是否只读
`max`	`number`	`—`	最大标签数量
`unique`	`boolean`	`true`	是否不允许重复标签
`separator`	`string \| RegExp`	`—`	分隔符，支持批量输入
`tagClass`	`string`	`—`	标签自定义 class
`tagStyle`	`Record<string, string>`	`—`	标签自定义 style
`error`	`string`	`''`	错误状态

Events

事件名	类型	说明
`update:modelValue`	`(value: string[]) => void`	标签变化时触发
`change`	`(value: string[]) => void`	标签变化时触发
`add`	`(value: string) => void`	添加标签时触发
`remove`	`(value: string) => void`	删除标签时触发
`focus`	`(event: FocusEvent) => void`	获得焦点时触发
`blur`	`(event: FocusEvent) => void`	失去焦点时触发

Methods

方法名	类型	说明
`focus`	`() => void`	使输入框获得焦点
`blur`	`() => void`	使输入框失去焦点