InputTag 标签输入

用于录入多个短文本项，如标签、关键词、邮箱列表。

基础用法

Vue

TypeScript

Vue, TypeScript

<template>
  <x-input-tag v-model="tags" placeholder="输入后回车" allow-clear />
</template>

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

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

状态

禁用只读错误

<template>
  <x-input-tag :default-value="['禁用']" disabled />
  <x-input-tag :default-value="['只读']" readonly />
  <x-input-tag :default-value="['错误']" error />
</template>

尺寸

mini

mini

mini

mini

<template>
  <x-input-tag v-model="tags" size="mini" />
  <x-input-tag v-model="tags" size="small" />
  <x-input-tag v-model="tags" size="medium" />
  <x-input-tag v-model="tags" size="large" />
</template>

限制展示数量

one

two

+2...

<template>
  <x-input-tag v-model="tags" :max-tag-count="2" allow-clear />
</template>

前缀和后缀

标签Vue

TypeScript

2

<template>
  <x-input-tag v-model="tags" allow-clear>
    <template #prefix>标签</template>
    <template #suffix>{{ tags.length }}</template>
  </x-input-tag>
</template>

唯一值

Vue

Vue

<template>
  <x-input-tag v-model="tags" unique-value placeholder="重复值不会再次创建" />
</template>

保留输入内容

draft

<template>
  <x-input-tag
    v-model="tags"
    retain-input-value
    placeholder="创建或失焦后保留输入内容"
  />
</template>

对象标签

#设计

#研发

<template>
  <x-input-tag
    v-model="tags"
    :field-names="fieldNames"
    :format-tag="formatTag"
    allow-clear
  />
</template>

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

const tags = ref([
  { id: 'a', name: '设计' },
  { id: 'b', name: '研发' },
]);
const fieldNames = {
  value: 'id',
  label: 'name',
};
const formatTag = (data: any) => `#${data.name}`;
</script>

自定义标签

设计

研发

<template>
  <x-input-tag v-model="tags" :field-names="fieldNames">
    <template #tag="{ data }">
      {{ data.name }}
    </template>
  </x-input-tag>
</template>

标签不换行

这是一段很长很长的标签内容，用于检查不换行时的显示效果

<template>
  <x-input-tag v-model="tags" tag-nowrap />
</template>

事件回调

日志

等待操作

<template>
  <x-input-tag
    v-model="tags"
    allow-clear
    @change="handleChange"
    @input-value-change="handleInputValueChange"
    @press-enter="handlePressEnter"
    @remove="handleRemove"
    @clear="handleClear"
  />
</template>

方法

Vue

TypeScript

<template>
  <x-input-tag ref="inputTagRef" v-model="tags" />
  <x-button @click="inputTagRef?.focus()">聚焦</x-button>
  <x-button @click="inputTagRef?.blur()">失焦</x-button>
</template>

按需导入

import { InputTag } from 'x-next';

Props

参数	说明	类型	默认值
modelValue	绑定值	Array<string | number | TagData>	-
defaultValue	默认值，非受控模式	Array<string | number | TagData>	[]
inputValue	输入框绑定值	string	-
defaultInputValue	输入框默认值	string	''
placeholder	占位提示	string	-
disabled	是否禁用	boolean	false
error	是否错误状态	boolean	false
readonly	是否只读	boolean	false
allowClear	是否允许清空	boolean	false
size	输入框尺寸	'mini' | 'small' | 'medium' | 'large'	跟随全局配置
maxTagCount	最多展示标签个数，0 不限制	number	0
retainInputValue	创建或失焦后是否保留输入内容	boolean | { create?: boolean; blur?: boolean }	false
formatTag	格式化标签内容	(data: TagData) => string	-
uniqueValue	是否仅创建唯一值	boolean	false
fieldNames	自定义 TagData 字段名	object	-
tagNowrap	标签内容是否不换行	boolean	false

Events

事件名	说明	回调参数
update:modelValue	值更新时触发	value
update:inputValue	输入值更新时触发	inputValue
change	标签值变化时触发	value, event
input-value-change	输入值变化时触发	inputValue, event
press-enter	按下回车时触发	inputValue, event
remove	删除标签时触发	removed, event
clear	点击清除按钮时触发	event
focus	获取焦点时触发	event
blur	失去焦点时触发	event
keydown	按下键盘时触发	event

Slots

插槽名	说明	参数
prefix	前缀内容	-
suffix	后缀内容	-
tag	自定义标签内容	{ data }

Methods

方法	说明
focus	使输入框获取焦点
blur	使输入框失去焦点