TagsInput 标签输入

用于输入多个标签/关键词的输入组件，支持回车或粘贴分隔，可逐个删除，常用于标签、关键词、收件人等场景。

何时使用

  • 需要用户输入多个标签或关键词时。

基础用法

使用 TagsInput 根组件 + TagsInputItem / TagsInputInput 组合，回车即可添加新标签。

<script setup lang="ts">
import { ref } from "vue";
import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from "@reglow/reui";

const tags = ref(["Vue", "Nuxt", "TypeScript"]);
</script>

<template>
  <TagsInput v-model="tags" class="min-h-[40px]">
    <TagsInputItem v-for="tag in tags" :key="tag" :value="tag">
      <TagsInputItemText>{{ tag }}</TagsInputItemText>
      <TagsInputItemDelete />
    </TagsInputItem>
    <TagsInputInput placeholder="输入标签后回车" />
  </TagsInput>
</template>

更多示例

禁用状态

在 TagsInput 上设置 disabled 后不可再编辑或删除标签。

<script setup lang="ts">
import { ref } from "vue";
import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from "@reglow/reui";

const tags = ref(["Vue", "Nuxt"]);
</script>

<template>
  <TagsInput v-model="tags" disabled class="min-h-[40px]">
    <TagsInputItem v-for="tag in tags" :key="tag" :value="tag">
      <TagsInputItemText>{{ tag }}</TagsInputItemText>
      <TagsInputItemDelete />
    </TagsInputItem>
    <TagsInputInput placeholder="已禁用" />
  </TagsInput>
</template>

限制标签数量

通过 max 限制可添加的最大标签数量，达到上限后输入框不再新增标签。

<script setup lang="ts">
import { ref } from "vue";
import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from "@reglow/reui";

const tags = ref(["Vue", "Nuxt"]);
const max = 3;
</script>

<template>
  <TagsInput v-model="tags" :max="max" class="min-h-[40px]">
    <TagsInputItem v-for="tag in tags" :key="tag" :value="tag">
      <TagsInputItemText>{{ tag }}</TagsInputItemText>
      <TagsInputItemDelete />
    </TagsInputItem>
    <TagsInputInput placeholder="最多添加 3 个标签" />
  </TagsInput>
</template>

导入

import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from "@reglow/reui";

子组件

子组件说明
TagsInput根组件，v-model 绑定标签数组
TagsInputItem单个标签，value 为标签值
TagsInputItemText标签文本内容
TagsInputItemDelete删除按钮（默认 X 图标，可用插槽替换）
TagsInputInput标签输入框

Props

各子组件均透传 reka-ui 对应属性，并额外支持 class：

组件关键属性说明
TagsInputmodelValue / size / max / disabled标签数组（v-model）；size 支持 small / medium / large，高度 32 / 36 / 44px，空态与换行时自动撑开
TagsInputItemvalue当前标签值
TagsInputInputplaceholder 等输入框属性

0.6.5 起 tags-input 由 components/ui 迁至 components/reui，@reglow/reui/ui/tags-input 旧路径继续可用，新主路径为 @reglow/reui/reui/tags-input。

Switch 开关
Switch 开关
Textarea 文本域
Textarea 文本域