Skip to content

标签输入框

@astryxdesign/core v0.7.1 · Tokenizer

Tokenizer Props ​

名称类型默认值说明
modelValueT[][]已选条目。
searchSourceSearchSource<T>必需静态或异步搜索源。
labelstring必需字段标签。
descriptionstring—标签下方的说明。
labelTooltipstring—标签旁边信息图标里的提示文字。
isLabelHiddenbooleanfalse视觉上隐藏标签,读屏仍然读得到。旧名 labelHidden 同样可用,两者任一为真就隐藏。
containerClass / controlClassclass—外壳和输入外框。根上的 class 落在外框,不落到原生 input。候选项的 action 和自动完成一样。
placeholderstringAdd… / 添加…输入框占位符。只在还没有标签时显示。
hasCreatebooleanfalse允许把输入的文字收成新标签。没匹配到结果时下拉会多出「新建 …」一项,此时变化的类型是 create。
creatablebooleanfalsehasCreate 的旧名。两者任一为真即生效。
overflow'none' | 'unfocused-inline' | 'unfocused-layer''none'失焦时是否收成一行并显示 +N。
maxEntriesnumber—最多可选几条。达到上限后输入框只读。
debounceMsnumber150输入停顿后再搜索。
minQueryLengthnumber1够长才去搜索的下限,按人眼看到的字符数算。太短就完全不搜,下拉也不打开——除非开了 hasCreate:「新建 …」是从输入文字派生的,不用搜。
hasEntriesOnFocusbooleanfalse聚焦后还没输入就展示结果。
showOnFocusbooleanfalsehasEntriesOnFocus 的旧名。两者任一为真即生效。
hasAutoFocusbooleanfalse挂载后自动聚焦输入框。
menuWidthnumber—下拉想要的宽度,单位像素。窄不过输入区,再宽会被视口截住。
maxMenuItemsnumber10下拉最多显示多少条结果。「新建 …」这一项是在它们之外另加的。
hasClearbooleanfalse是否显示全部清除按钮,一次清掉所有标签。
clearablebooleanfalsehasClear 的旧名。两者任一为真即生效。
emptySearchTextstring | null'No results found' / '未找到结果'没有匹配结果时显示的文字。null 当作没给,退回默认;空字符串表示什么都不显示。要放链接这类富内容用 empty 插槽。
emptyTextstring | null—emptySearchText 的旧名。
disabledbooleanfalse禁用整个字段和所有标签交互。
disabledMessagestring—说明为什么被禁用。和 disabled 一起用时,输入框改用 aria-disabled 加 readonly,因此仍然可聚焦,鼠标悬停或键盘聚焦都能读到这段说明。
disabledReasonstring—disabledMessage 的旧名。
status'default' | 'success' | 'warning' | 'error''default'状态样式。
statusMessagestring—字段下方的状态说明。
size'sm' | 'md' | 'lg''md'输入框和标签的尺寸。
requiredbooleanfalse标记为必填。
optionalbooleanfalse标签上显示「可选」标记。
namestring—表单字段名。每个已选 id 提交一次。
widthnumber | string—整个字段的宽度(数字按像素算,字符串原样使用)。

Tokenizer Emits ​

名称载荷说明
update:modelValuevalue: T[]已选条目变化时触发。
changevalue: T[]、change: TokenizerChange带上这次变化的类型:add、create、remove、clear。
changeQueryquery: string查询文字变化时触发。
searchquery: stringchangeQuery 的旧名。两个都会触发。
openChangeisOpen: boolean列表打开或关闭时触发。
focusevent: FocusEvent焦点从外面进入整个字段时触发。
blurevent: FocusEvent焦点离开整个字段时触发,不只是离开输入框。

Tokenizer Slots ​

名称参数说明
icon—输入区开头的图标,在所有标签之前。
end—输入区末尾的内容,比如按钮或结果计数。
token{ item, remove }自定义已选标签,替换默认的 Token。
item{ item, isActive, isSelected }自定义下拉条目,替换默认的 TypeaheadItem。
empty—自定义空状态。

上面没列出的原生属性和事件监听会落到输入框上,所以 @keydown、@paste 和 aria-* 的用法跟普通 <input> 一样。keydown 监听先于内部的标签间导航执行,调用 event.preventDefault() 就能跳过内部处理。