用法
使用 v-model 指令控制 InputTags 的值。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" />
</template>
使用 default-value prop 在您不需要控制其状态时设置初始值。
<template>
<UInputTags :default-value="['Vue']" />
</template>
占位符
使用 placeholder 属性设置占位文本。
<template>
<UInputTags placeholder="Enter tags..." />
</template>
最大长度
使用 max-length 属性设置标签允许的最大字符数。
<template>
<UInputTags :max-length="4" />
</template>
颜色
使用 color 属性更改 InputTags 聚焦时的环形颜色。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" color="neutral" highlight />
</template>
highlight 属性在此用于显示焦点状态。当发生验证错误时，它会在内部使用。变体
使用 variant 属性更改 InputTags 的外观。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" variant="subtle" color="neutral" />
</template>
尺寸
使用 size 属性调整 InputTags 的尺寸。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" size="xl" />
</template>
Icon
使用 icon 属性在 InputTags 内部显示一个 图标。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" icon="i-lucide-search" size="md" variant="outline" />
</template>
使用
leading 和 trailing 属性设置图标位置，或者使用 leading-icon 和 trailing-icon 属性为每个位置设置不同的图标。Avatar
使用 avatar 属性在 InputTags 内部显示一个 头像。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags
v-model="value"
:avatar="{
src: 'https://github.com/vuejs.png'
}"
size="md"
variant="outline"
/>
</template>
删除图标
使用 delete-icon 属性自定义标签中的删除图标。默认为 i-lucide-x。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" delete-icon="i-lucide-trash" />
</template>
加载中
使用 loading 属性在 InputTags 上显示加载图标。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" loading />
</template>
加载图标
使用 loading-icon prop 来自定义加载图标。默认为 i-lucide-loader-circle。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" loading loading-icon="i-lucide-loader" />
</template>
禁用
使用 disabled 属性禁用 InputTags。
<script setup lang="ts">
const value = ref(['Vue'])
</script>
<template>
<UInputTags v-model="value" disabled />
</template>
示例
在 FormField 中
您可以在 FormField 组件中使用 InputTags 来显示标签、帮助文本、必填指示器等。
<script setup lang="ts">
const tags = ref(['Vue'])
</script>
<template>
<UFormField label="Tags" required>
<UInputTags v-model="tags" placeholder="Enter tags..." />
</UFormField>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
placeholder | string输入为空时的占位文本。 | |
最大长度 | number允许的最大字符数。 | |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
variant | 'outline' | "outline" | "soft" | "subtle" | "ghost" | "none" |
尺寸 | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
autofocus | boolean | |
autofocusDelay | 0 | number |
删除图标 | appConfig.ui.icons.close | any删除标签时显示的图标。 |
高亮 | boolean高亮环形颜色，如同焦点状态。 | |
modelValue | null | AcceptableInputValue[]标签输入的受控值。可以绑定为 | |
defaultValue | AcceptableInputValue[]应添加的标签值。当您不需要控制标签输入的状态时使用 | |
粘贴时添加 | boolean当 | |
Tab 键添加 | boolean当 | |
失焦添加 | boolean当 | |
重复 | boolean当 | |
disabled | boolean当 | |
分隔符 | string | RegExp触发添加新标签的字符或正则表达式。也用于 | |
max | number最大标签数。 | |
id | string | |
转换值 | (value: string): AcceptableInputValue将输入值转换为所需类型。当使用对象作为值并使用 | |
显示值 | (value: AcceptableInputValue): string显示标签的值。当您想对值应用修改（例如添加后缀）或使用对象作为值时很有用 | |
name | string字段的名称。作为名称/值对的一部分随其所属表单提交。 | |
required | boolean当为 | |
图标 | any根据 | |
avatar | AvatarProps在左侧显示头像。
| |
前置 | boolean当为 | |
leadingIcon | any在左侧显示图标。 | |
尾部 | boolean当为 | |
trailingIcon | any在右侧显示图标。 | |
loading | boolean当为 | |
loadingIcon | appConfig.ui.icons.loading | any当 |
autocomplete | string | |
list | string | |
readonly | false | true | "true" | "false" | |
ui | { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; item?: ClassNameValue; itemText?: ClassNameValue; itemDelete?: ClassNameValue; itemDeleteIcon?: ClassNameValue; input?: ClassNameValue; } |
插槽
| 插槽 | 类型 |
|---|---|
前置 | { ui: object; } |
default | { ui: object; } |
尾部 | { ui: object; } |
项目文本 | { item: AcceptableInputValue; index: number; ui: object; } |
项目删除 | { item: AcceptableInputValue; index: number; ui: object; } |
事件
| 事件 | 类型 |
|---|---|
change | [事件: Event] |
blur | [事件: FocusEvent] |
focus | [事件: FocusEvent] |
update:modelValue | [payload: AcceptableInputValue[]] |
无效 | [payload: AcceptableInputValue] |
添加标签 | [payload: AcceptableInputValue] |
删除标签 | [payload: AcceptableInputValue] |
可访问属性
通过模板引用访问组件时，您可以使用以下内容：
| 名称 | 类型 |
|---|---|
inputRef | Ref<HTMLInputElement | null> |
主题
app.config.ts
export default defineAppConfig({
ui: {
inputTags: {
slots: {
root: [
'relative inline-flex items-center',
'flex-wrap'
],
base: [
'rounded-md',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed',
item: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented',
itemText: '',
itemDelete: [
'inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none',
'transition-colors'
],
itemDeleteIcon: 'shrink-0',
input: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
},
variants: {
fieldGroup: {
horizontal: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
item: 'text-[10px]/3',
itemDeleteIcon: 'size-3'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
item: 'text-[10px]/3',
itemDeleteIcon: 'size-3'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
item: 'text-xs',
itemDeleteIcon: 'size-3.5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
item: 'text-xs',
itemDeleteIcon: 'size-3.5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6',
item: 'text-sm',
itemDeleteIcon: 'size-4'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
inputTags: {
slots: {
root: [
'relative inline-flex items-center',
'flex-wrap'
],
base: [
'rounded-md',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed',
item: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented',
itemText: '',
itemDelete: [
'inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none',
'transition-colors'
],
itemDeleteIcon: 'shrink-0',
input: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
},
variants: {
fieldGroup: {
horizontal: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
item: 'text-[10px]/3',
itemDeleteIcon: 'size-3'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
item: 'text-[10px]/3',
itemDeleteIcon: 'size-3'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
item: 'text-xs',
itemDeleteIcon: 'size-3.5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
item: 'text-xs',
itemDeleteIcon: 'size-3.5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6',
item: 'text-sm',
itemDeleteIcon: 'size-4'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
]
})