chenzy-design

如何引入

import { TagInput } from '@chenzy-design/svelte';

基础标签输入

回车或逗号添加标签，退格删除末项

svelte vite

标签：svelte / vite

分隔符与数量上限

多分隔符批量添加，max 限制数量，onExceed 提示

react vue

标签（2/5）：react / vue

不允许重复

allowDuplicates=false 时重复标签被忽略

frontend

标签（1）：frontend 尝试重复输入 frontend，不会新增。

自定义标签渲染

renderTagItem 完全接管标签外观

#1 urgent #2 design

标签：urgent / design

尺寸 / 失焦添加 / 禁用

size、addOnBlur、showClear 与 disabled

small + 失焦自动添加

sm

标签：sm

large

blur add

标签：blur / add

disabled

readonly lib

标签：readonly / lib

前缀 / 后缀

prefix、suffix 展示前后缀

标签： svelte vite

前端设计个

限制展示数量

maxTagCount 超出折叠为 +N，hover 查看剩余，点击展开

svelte vite

拖拽排序

draggable 配合 allowDuplicates=false 拖拽重排标签

需求设计开发测试上线

受控

value + onChange 受控，外部展示当前标签数组

svelte vite

当前标签：svelte / vite

命令式聚焦

通过 bind:this 获取实例，调用 focus() / blur()

svelte vite

事件回调

onAdd、onRemove、onChange 回调记录到日志

svelte

暂无事件，试试添加或删除标签

截断提示

maxTagTextLength 截断，showContentTooltip 悬浮显示全文

标签超过 6 个字符即截断，悬浮标签查看全文

自定义校验

validateTag 拒绝非法标签，onInvalid 上报原因

react svelte

试试输入包含数字或符号的标签

自定义删除图标

removeIcon 自定义默认标签的删除图标

svelte vite unocss

建议补全

renderSuggestions 输入时弹建议浮层，点击添加

Svelte

已选：Svelte

API 参考

TagInput

Props

属性	说明	类型	默认值
`value`	—	`string[]`	undefined
`defaultValue`	—	`string[]`	[]
`inputValue`	—	`string`	undefined
`defaultInputValue`	—	`string`	''
`placeholder`	—	`string`	undefined
`size`	—	`'small'\|'default'\|'large'`	default
`status`	—	`'default'\|'warning'\|'error'`	default
`disabled`	—	`boolean`	false
`readonly`	—	`boolean`	false
`max`	—	`number`	undefined
`maxLength`	—	`number`	undefined
`maxTagTextLength`	—	`number`	undefined
`separator`	—	`string\|string[]`	['Enter']
`addOnBlur`	—	`boolean`	false
`allowDuplicates`	—	`boolean`	false
`trimWhitespace`	—	`boolean`	true
`draggable`	—	`boolean`	false
`split`	自定义分隔处理函数（对齐 Semi，优先于内置拆分）	`(value: string, separator: string) => string[]`	undefined
`prefix`	输入框前缀（string/图标自动带间隔）	`string \| Snippet`	undefined
`suffix`	输入框后缀	`string \| Snippet`	undefined
`maxTagCount`	标签最大展示数量，超出折叠为 +N	`number`	undefined
`showRestTagsPopover`	hover +N 是否用 Popover 展示剩余标签	`boolean`	true
`expandRestTagsOnClick`	点击 +N 是否展开剩余标签	`boolean`	true
`showClear`	显示清除全部按钮	`boolean`	false
`clearIcon`	自定义清除图标	`Snippet`	undefined
`preventScroll`	focus 时阻止滚动	`boolean`	false
`autoFocus`	挂载自动聚焦	`boolean`	false
`inputProps`	透传给内部 input 的额外属性	`Record<string, unknown>`	undefined
`renderTagItem`	完全自定义 tag 渲染	`Snippet<[{ value: string; index: number; onClose: () => void }]>`	undefined
`onChange`	—	`(tags: string[]) => void`	undefined
`onInputChange`	—	`(value: string) => void`	undefined
`onAdd`	新增标签后触发，传当前完整数组（对齐 Semi）	`(addedValue: string[]) => void`	undefined
`onRemove`	移除单个标签时触发（对齐 Semi）	`(removedValue: string, index: number) => void`	undefined
`onKeyDown`	输入框 keydown 透传（对齐 Semi）	`(e: KeyboardEvent) => void`	undefined
`onExceed`	超出 max 时触发，传当前标签数组（对齐 Semi）	`(value: string[]) => void`	undefined
`onInputExceed`	单 tag 超出 maxLength 时触发	`(value: string) => void`	undefined
`onFocus`	输入框聚焦	`(e: FocusEvent) => void`	undefined
`onBlur`	输入框失焦	`(e: FocusEvent) => void`	undefined
`ariaLabel`	—	`string`	undefined

Methods

属性	类型	说明
`focus()`	`—`	命令式聚焦输入框（尊重 preventScroll，对齐 Semi）
`blur()`	`—`	命令式移除焦点（对齐 Semi）

Accessibility

设计变量

变量	默认值	用法
`--cd-color-tag-input-border-default`	`transparent`	标签输入框描边颜色 - 默认
`--cd-color-tag-input-border-focus`	`var(--cd-color-focus-border)`	标签输入框描边颜色 - 选中态
`--cd-color-tag-input-border-hover`	`transparent`	标签输入框描边颜色 - 悬浮
`--cd-color-tag-input-danger-bg-default`	`var(--cd-color-danger-light-default)`	危险标签输入框背景颜色 - 默认
`--cd-color-tag-input-danger-bg-focus`	`var(--cd-color-danger-light-default)`	危险标签输入框背景颜色 - 选中
`--cd-color-tag-input-danger-bg-hover`	`var(--cd-color-danger-light-hover)`	危险标签输入框背景颜色 - 悬浮
`--cd-color-tag-input-danger-border-default`	`var(--cd-color-danger-light-default)`	危险标签输入框描边颜色 - 默认
`--cd-color-tag-input-danger-border-focus`	`var(--cd-color-danger)`	危险标签输入框描边颜色 - 选中
`--cd-color-tag-input-danger-border-hover`	`var(--cd-color-danger-light-hover)`	危险标签输入框描边颜色 - 悬浮
`--cd-color-tag-input-default-bg-default`	`var(--cd-color-fill-0)`	标签输入框背景颜色 - 默认