Components

TagInput 标签输入

将逗号分隔的文本转为可编辑、可删除的标签集合。

筛选值

输入后按 Enter、逗号或失焦即可添加;支持粘贴多个值。

生产环境 香港

支持 Enter、逗号与粘贴多个值。

当前值:生产环境, 香港

<TagInput
  v-model="tags"
  label="筛选标签"
  placeholder="输入服务、地区或角色..."
  hint="支持 Enter、逗号与粘贴多个值。"
/>

自定义分隔符与数量限制

用多个分隔符接收批量角色 ID,并限制最多五项。

1234567890
<TagInput
  v-model="roleIds"
  label="Discord Role IDs"
  :separator="[',', ';', '\n']"
  :max="5"
/>

API 参考

属性类型默认值说明
model-valuestring[][]v-model 标签值数组。
placeholderstring输入标签...无标签时的输入提示。
separatorstring | string[]','用于批量拆分输入和粘贴内容的分隔符。
uniquebooleantrue是否忽略重复标签。
maxnumber—可添加标签的最大数量。
add-on-pastebooleantrue是否将粘贴内容按分隔符批量添加。
size'sm' | 'md' | 'lg''md'输入框尺寸。
disabledbooleanfalse禁用添加和删除操作。