TagsInput 标签输入

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

何时使用

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

当前值：Vue、Nuxt、TypeScript

基础用法

<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>

导入

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

子组件

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

Props

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

组件关键属性说明
TagsInputmodelValue标签数组（v-model）
TagsInputItemvalue当前标签值
TagsInputInputplaceholder 等输入框属性
Switch 开关
Switch 开关
Textarea 文本域
Textarea 文本域