标签输入 Input Tag

专门输入标签的输入框，如果需要输入一系列的文本，这可能有用。

基础使用

这个组件用于标签输入，输入完按键 Enter 录入标签。

对于标签列表，传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

对于输入的文本，传入 inputValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultInputValue 属性作为默认值。

Madoka

Sayaka

Mami

modelValue: [ "Sayaka", "Mami" ]; inputValue: Kyoko

隐藏源代码

折叠标签

设置 collapseTags 属性可开启折叠标签（默认为 false），maxDisplayTags 属性设置最大展示标签，collapseTagsPopover 设置折叠后是否通过弹出框展示被折叠的标签（默认为 true）。

隐藏源代码

数量限制

传入 maxLength 属性限制标签数量。

隐藏源代码

标签样式

传入 tagVariant 属性设置标签样式变体，tagTheme 属性控制标签主题，tagColor 属性自定义标签主题颜色。

隐藏源代码

自定义标签内容

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

隐藏源代码

更多配置

InputTag 还拥有 Input 组件的部分功能。

Disabled, Readonly, Loading & Clearable

Size

Count

Slot

feat:

Pixel Art

Dark Mode

Status

Expose

隐藏源代码

API

InputTagProps

属性	类型	可选	默认值	描述	版本
modelValue	string[] | null	是		标签输入框的值（受控模式），支持 v-model。	0.0.2
defaultValue	string[] | null	是		标签输入框的默认值（非受控模式）。	0.0.2
inputValue	string | null	是		内部文本输入框的值（受控模式），支持 v-model。	0.0.2
defaultInputValue	string | null	是		内部文本输入框的默认值（非受控模式）。	0.0.2
placeholder	string	是		占位符文本。	0.0.2
disabled	boolean	是	false	是否禁用。	0.0.2
readonly	boolean	是	false	是否只读。	0.0.2
clearable	boolean	是	false	是否显示清除按钮。	0.0.2
loading	boolean	是	false	是否显示加载状态。	0.0.2
size	'medium' | 'large' | 'small'	是	'medium'	输入框尺寸。	0.0.2
shape	'rect' | 'round'	是	'rect'	输入框形状。	0.0.3
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.0.2
maxLength	number	是		最大输入长度。	0.0.2
collapseTags	boolean	是	false	是否开启折叠标签。	0.0.2
collapseTags	number	是		是否开启折叠标签。	0.0.2
collapseTagsPopover	boolean	是	true	是否在弹出框中展示被折叠的标签，开启 collapseTags 后生效。	0.0.2
tagProps	Omit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents> & RestAttrs	是		标签的属性。	0.0.3
status	'success' | 'warning' | 'error' | 'normal'	是	'normal'	表单验证状态。	0.0.2
autofocus	boolean	是	false	原生 <input> 的 autofocus 属性。	0.0.2
tagTheme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'	是	'info'	Deprecated 标签的 theme 属性，设置标签主题颜色。	0.0.2
tagVariant	'primary' | 'plain' | 'outline'	是	'plain'	Deprecated 标签的 variant 属性，设置标签样式变体。	0.0.2
tagColor	string	是		Deprecated 标签的 color 属性，自定义标签颜色。	0.0.2
popoverProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	是		标签折叠时，弹出框 Popover 组件的属性。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

InputTagEvents

事件	参数	描述	版本
update:modelValue	value: string[]	更新 modelValue 的回调。	0.0.2
tagAdd	value: string, e: KeyboardEvent	添加标签时的回调。	0.0.2
tagClose	value: string, index: number, e: MouseEvent	关闭标签时的回调。	0.0.2
change	value: string[]	标签列表内容变化时的回调。	0.0.2
input	value: string, e: Event	输入框输入时的回调。	0.0.2
update:inputValue	value: string	更新 inputValue 的回调。	0.0.2
inputChange	value: string, e: Event | undefined	输入内容变化时的回调。	0.0.2
clear	value: string[]	点击清除文本按钮，清除内容时的回调。	0.0.2
blur	e: FocusEvent	输入框失焦时的回调。	0.0.2
focus	e: FocusEvent	输入框聚焦时的回调。	0.0.2

InputTagSlots

插槽	参数	描述	版本
prefix		前缀内容。	0.0.2
suffix		后缀内容。	0.0.2
tag	tag: string, index: number	标签内容。	0.0.2

InputTagExpose

属性	类型	可选	默认值	描述	版本
focus	() => void	否		聚焦到当前输入框。	0.0.2
blur	() => void	否		取消聚焦当前输入框。	0.0.2
clear	() => void	否		清空当前输入框。	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}