FxInputTag 标签输入框

允许用户将输入内容作为标签添加。不依赖任何 UI 框架，标签样式与 FxSelect 的折叠标签一致（中性灰），颜色走 @fx/styles 的 --color-* token，亮暗自动跟随。

基础用法

按回车键将输入内容添加为标签。

<template>
  <FxInputTag
    v-model="input"
    placeholder="请输入后按回车键添加"
    aria-label="请输入后按回车键添加标签"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>([])
</script>

自定义触发键

通过 trigger 属性自定义添加标签的按键，默认为 Enter。

<template>
  <div class="row">
    <FxSegmented v-model="trigger" :options="options" />
  </div>
  <FxInputTag
    v-model="input"
    :trigger="trigger"
    placeholder="请输入后按键添加"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { InputTagTrigger } from "@fx/components"

const trigger = ref<InputTagTrigger>("Space")
const input = ref<string[]>([])
const options: InputTagTrigger[] = ["Enter", "Space"]
</script>

<style scoped>
.row {
  margin-bottom: 12px;
}
</style>

最大数量

通过 max 属性限制可添加的标签数量。

<template>
  <FxInputTag v-model="input" :max="3" placeholder="最多输入 3 个标签" />
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>([])
</script>

折叠标签

通过 collapse-tags 将多余的标签折叠为一段文本；配合 collapse-tags-tooltip 在鼠标悬停折叠文本时展示全部标签；max-collapse-tags 控制折叠前最多显示的标签数。

<template>
  <div class="wrap">
    <p>使用 collapse-tags</p>
    <FxInputTag
      v-model="input1"
      collapse-tags
      placeholder="请输入"
      aria-label="请输入后按回车键添加标签"
    />
    <p>使用 collapse-tags-tooltip</p>
    <FxInputTag
      v-model="input2"
      collapse-tags
      collapse-tags-tooltip
      placeholder="请输入"
      aria-label="请输入后按回车键添加标签"
    />
    <p>使用 max-collapse-tags</p>
    <FxInputTag
      v-model="input3"
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="3"
      placeholder="请输入"
      aria-label="请输入后按回车键添加标签"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const input1 = ref<string[]>(["标签1", "标签2", "标签3", "标签4"])
const input2 = ref<string[]>(["标签1", "标签2", "标签3", "标签4"])
const input3 = ref<string[]>(["标签1", "标签2", "标签3", "标签4", "标签5"])
</script>

<style scoped>
.wrap p {
  margin: 12px 0 8px;
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
.wrap p:first-child {
  margin-top: 0;
}
</style>

禁用

通过 disabled 属性禁用标签输入框。

<template>
  <FxInputTag v-model="input" disabled placeholder="请输入" />
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>(["标签1", "标签2", "标签3"])
</script>

可清空

通过 clearable 属性显示清除按钮。

<template>
  <FxInputTag v-model="input" clearable placeholder="请输入" />
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>(["标签1", "标签2", "标签3"])
</script>

自定义清除图标

通过 clear-icon 属性自定义清除图标（字符串为 FxIcon 图标名，也可传组件）。

<template>
  <FxInputTag
    v-model="input"
    clearable
    clear-icon="ep:close-bold"
    placeholder="自定义清除图标"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>(["自定义", "清除", "图标"])
</script>

拖拽排序

通过 draggable 属性开启标签拖拽排序。

<template>
  <FxInputTag v-model="input" draggable placeholder="请输入" />
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>(["标签1", "标签2", "标签3"])
</script>

分隔符

通过 delimiter 属性设置分隔符，输入匹配到分隔符时自动切分为多个标签（粘贴时同样生效）。

<template>
  <FxInputTag
    v-model="input"
    draggable
    delimiter=","
    placeholder="尝试用英文逗号分隔多个词"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>([])
</script>

尺寸

通过 size 属性设置 large / default / small 三种尺寸。

<template>
  <div class="wrap">
    <FxInputTag v-model="input" size="large" placeholder="large 尺寸" />
    <FxInputTag v-model="input" placeholder="default 尺寸" />
    <FxInputTag v-model="input" size="small" placeholder="small 尺寸" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>([])
</script>

<style scoped>
.wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

自定义标签

通过 tag-type / tag-effect 切换标签的语义色与主题（默认 info 为中性灰，与 FxSelect 折叠标签一致），也可用 tag 插槽自定义标签内容。

<template>
  <div class="row">
    <FxSegmented v-model="tagType" :options="types" class="mr" />
    <FxSegmented v-model="tagEffect" :options="effects" />
  </div>
  <FxInputTag
    v-model="input"
    :tag-type="tagType"
    :tag-effect="tagEffect"
    placeholder="请输入"
  >
    <template #tag="{ value }">
      <span class="tag-content">
        <FxIcon name="ep:price-tag" class="tag-icon" />
        <span>{{ value }}</span>
      </span>
    </template>
  </FxInputTag>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { TagType, TagEffect } from "@fx/components"

const types: TagType[] = ["primary", "success", "info", "warning", "danger"]
const effects: TagEffect[] = ["light", "dark", "plain"]

const tagType = ref<TagType>("info")
const tagEffect = ref<TagEffect>("light")
const input = ref<string[]>(["标签1", "标签2", "标签3"])
</script>

<style scoped>
.row {
  margin-bottom: 12px;
}
.mr {
  margin-right: 20px;
}
.tag-content {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.tag-icon {
  margin-right: 4px;
  flex-shrink: 0;
}
</style>

前缀与后缀

通过 prefix / suffix 插槽自定义标签输入框的前置 / 后置内容。

<template>
  <FxInputTag v-model="input" clearable placeholder="请输入">
    <template #prefix>
      <FxIcon name="ep:user" />
    </template>
    <template #suffix>
      <FxIcon name="ep:search" />
    </template>
  </FxInputTag>
</template>

<script setup lang="ts">
import { ref } from "vue"

const input = ref<string[]>([])
</script>

API

Attributes

属性	说明	类型	默认值
model-value (v-model)	绑定值	string[]	—
max	可输入标签的最大数量	number	—
tag-type	标签类型（info 为默认中性灰，与 FxSelect 折叠标签一致，其余为语义色）	'primary' | 'success' | 'info' | 'warning' | 'danger'	info
tag-effect	标签主题	'light' | 'dark' | 'plain'	light
effect	折叠提示气泡主题（collapse-tags-tooltip 生效时使用）	'dark' | 'light'	light
trigger	触发添加标签的按键	'Enter' | 'Space'	Enter
draggable	标签是否可拖拽排序	boolean	false
delimiter	匹配到分隔符时自动添加标签	string / RegExp	—
size	输入框尺寸	'large' | 'default' | 'small'	—
collapse-tags	是否将多余标签折叠为一段文本	boolean	false
collapse-tags-tooltip	鼠标悬停折叠文本时是否展示全部标签（需 collapse-tags 为 true）	boolean	false
max-collapse-tags	折叠前最多显示的标签数（需 collapse-tags 为 true）	number	1
save-on-blur	失焦时是否保存当前输入为标签	boolean	true
clearable	是否显示清除按钮	boolean	false
clear-icon	自定义清除图标（字符串为 FxIcon 图标名，也可传组件）	string / Component	ep:circle-close
disabled	是否禁用	boolean	false
validate-event	值变化 / 失焦时是否触发表单项校验	boolean	true
readonly	原生 readonly	boolean	false
autofocus	原生 autofocus	boolean	false
id	原生 id	string	—
tabindex	原生 tabindex	string / number	0
maxlength	原生 maxlength	string / number	—
minlength	原生 minlength	string / number	—
placeholder	占位文本	string	—
autocomplete	原生 autocomplete	string	off
aria-label	原生 aria-label	string	—

Events

事件名	说明	类型
change	绑定值变化时触发	(value: string[] | undefined) => void
input	输入值变化时触发	(value: string) => void
add-tag	添加标签时触发	(value: string | string[]) => void
remove-tag	移除标签时触发	(value: string, index: number) => void
drag-tag	拖拽排序标签时触发	(oldIndex: number, newIndex: number, value: string) => void
focus	聚焦时触发	(event: FocusEvent) => void
blur	失焦时触发	(event: FocusEvent) => void
clear	点击清除按钮时触发	() => void

Slots

插槽名	说明	类型
tag	自定义标签内容	{ value: string, index: number }
prefix	输入框前置内容	—
suffix	输入框后置内容	—

Exposes

名称	说明	类型
focus	聚焦输入框	() => void
blur	失焦输入框	() => void

类型声明

展开查看

type InputTagTrigger = "Enter" | "Space"
type InputTagEffect = "dark" | "light"