InputTag 标签输入框
用于输入和管理多个标签。
基础用法
使用 v-model 绑定标签数组。按 Enter 或 , 键确认输入并添加标签。
VueReact
当前标签: Vue, React
基础用法
禁用状态
使用 disabled 属性禁用输入框。
标签一标签二
禁用状态
限制数量
使用 max 属性限制最大标签数量。
已输入 0 / 5 个标签
限制数量
可清空
使用 clearable 属性启用一键清空功能。
JavaScriptTypeScript
可清空
折叠标签
使用 collapse-tags 属性可以将多个标签折叠显示。配合 collapse-tags-tooltip 可以在悬停时显示所有标签。
use collapse-tags:
234324 + 4
use collapse-tags-tooltip:
234324 + 4
use max-collapse-tags:
23432412321312312312312 + 2
折叠标签
可拖拽排序
使用 draggable 属性可以拖拽标签进行排序。
可拖拽1可拖拽2可拖拽3可拖拽4
拖拽标签可以改变顺序
可拖拽排序
前缀和后缀
使用 prefix 和 suffix 属性可以添加前缀和后缀。
标签:
VueReact
VueReact
个前缀和后缀
标签效果
使用 tag-effect 属性可以设置标签的显示效果。
标签一
标签一
标签一
标签效果
不同尺寸
使用 size 属性控制输入框尺寸。
标签一
标签一
标签一
不同尺寸
在 Nuxt 中使用
InputTag 组件完全兼容 Nuxt 3/4。在 SSR 场景下，已有的标签（modelValue）会在服务端被直接渲染为静态 HTML 标签，确保首屏视觉的一致性，同时也对搜索引擎爬虫友好。
SSRNuxt 3
Nuxt 中使用
SSR 注意事项：
- ✅ 初始标签数组完全支持 SSR 同步渲染
- ✅ 标签的样式、主题 (tag-effect) 和尺寸支持服务端渲染
- ✅ 前后缀文本和图标在服务端即已占位并显示
- ⚠️ 动态添加（回车确认）、拖拽排序、删除标签等交互在客户端激活（Hydration）后生效
- 💡 虚拟滚动（针对超长标签列表，如果开启）在服务端渲染基础可见部分
SSR 性能优化
InputTag 组件在服务端渲染时，会根据 modelValue 的长度动态生成优化过的 HTML 片段，减少了客户端激活时的 DOM 差量计算，从而提升了页面的交互响应速度。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值（标签数组） | string[] | [] |
| type | 标签类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'info' |
| size | 尺寸 | 'large' | 'default' | 'small' | 'default' |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否只读 | boolean | false |
| max | 最大标签数量 | number | — |
| separator | 分隔符 | string | string[] | [',', 'Enter'] |
| placeholder | 占位符 | string | — |
| clearable | 是否可清空 | boolean | false |
| add-on-blur | 失焦时是否添加输入的内容 | boolean | true |
| closable | 标签是否可关闭 | boolean | true |
| validate-tag | 验证函数 | (value: string) => boolean | — |
| trim | 是否去除首尾空格 | boolean | true |
| allow-duplicate | 是否允许重复标签 | boolean | false |
| collapse-tags | 是否折叠标签 | boolean | false |
| collapse-tags-tooltip | 折叠时是否显示 tooltip | boolean | false |
| max-collapse-tags | 最大折叠标签数量 | number | 1 |
| draggable | 是否可拖拽排序 | boolean | false |
| tag-effect | 标签效果 | 'dark' | 'light' | 'plain' | 'light' |
| prefix | 前缀文本 | string | — |
| suffix | 后缀文本 | string | — |
| prefix-icon | 前缀图标 | Component | — |
| suffix-icon | 后缀图标 | Component | — |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 标签变化时触发 | (value: string[]) => void |
| input | 输入时触发 | (value: string) => void |
| add | 添加标签时触发 | (tag: string) => void |
| remove | 移除标签时触发 | (tag: string, index: number) => void |
| focus | 聚焦时触发 | (event: FocusEvent) => void |
| blur | 失焦时触发 | (event: FocusEvent) => void |
| clear | 清空时触发 | () => void |
| drag-end | 拖拽结束时触发 | (tags: string[]) => void |
Slots
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
| prefix | 自定义前缀内容 | — |
| suffix | 自定义后缀内容 | — |
| tag | 自定义标签内容 | { tag: string, index: number, close: () => void } |
| clear-icon | 自定义清除图标 | — |
| collapse-tag | 自定义折叠标签内容 | { count: number, tags: string[] } |
Expose
| 属性名 | 说明 | 类型 |
|---|---|---|
| focus | 使输入框获取焦点 | () => void |
| blur | 使输入框失去焦点 | () => void |
| clear | 清空所有标签 | () => void |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-input-tag-min-height | 最小高度 | var(--yh-component-size-default) |
--yh-input-tag-font-size | 字体大小 | var(--yh-font-size-base) |
--yh-input-tag-bg-color | 背景颜色 | var(--yh-fill-color-blank) |
--yh-input-tag-border-color | 边框颜色 | var(--yh-border-color) |
--yh-input-tag-tag-height | 标签高度 | 22px |
--yh-input-tag-gap | 标签间距 | 4px |