标签输入 Tags Input

Root · Label · Control · Input · ClearTrigger · Item · ItemPreview · ItemInput · ItemText · ItemDeleteTrigger

#ClearTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Input

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemContext

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemDeleteTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemPreview

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Item

属性	类型	描述
`disabled`	`boolean \| undefined`	—
`index`	`string \| number`	—
`value`	`string`	—

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	标签输入框静止状态的高度档位
`addOnPaste`	`boolean`	`false`	粘贴内容时是否添加标签
`allowDuplicates`	`boolean`	`false`	是否允许重复标签
`allowOverflow`	`boolean`		是否允许标签数量超过 `max`；超过后根元素会附加 `data-invalid`
`autoFocus`	`boolean`		input 是否自动聚焦
`blurBehavior`	`'clear' \| 'add'`		标签输入失焦时的行为：`add` 把 input 值添加为新标签，`clear` 清空 input 值
`defaultInputValue`	`string`		标签输入渲染时的初始值；不需要控制输入值时使用
`defaultValue`	`string[]`		标签渲染时的初始值；不需要控制标签值时使用
`delimiter`	`string \| RegExp`	`","`	触发添加标签的按键，也是粘贴时拆分标签的字符
`disabled`	`boolean`		标签输入是否禁用
`editable`	`boolean`	`true`	标签创建后能否按 `Enter` 或双击编辑
`form`	`string`		底层 `input` 元素关联的表单
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item(opts: tagsInput.ItemProps): string; itemDeleteTrigger(opts: tagsInput.ItemProps): string; itemInput(opts: tagsInput.ItemProps): string; }>`		标签输入各元素的 id，适合组合使用
`inputValue`	`string`		标签输入的受控值
`invalid`	`boolean`		标签输入是否无效
`max`	`number`	`Infinity`	标签数量上限
`maxLength`	`number`		input 最大长度
`modelValue`	`string[]`		标签输入的 `v-model` 值
`name`	`string`		input 的 `name` 属性，用于表单提交
`placeholder`	`string`		没有标签时 input 的占位文本
`readOnly`	`boolean`		标签输入是否只读
`required`	`boolean`		标签输入是否必填
`sanitizeValue`	`(value: string) => string`		添加标签前清理标签值的函数
`translations`	`tagsInput.IntlTranslations`		无障碍元素及其状态的本地化文案
`validate`	`(details: tagsInput.ValidateArgs) => boolean`		返回能否添加标签的布尔值，可防止重复或无效标签值

事件	载荷
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: string[]`
`focusOutside`	`event: FocusOutsideEvent`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`highlightChange`	`details: HighlightChangeDetails`
`inputValueChange`	`details: InputValueChangeDetails`
`update:inputValue`	`value: string`
`valueInvalid`	`details: ValidityChangeDetails`