Textarea
用法
使用 v-model
指令来控制 Textarea 的值。
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UTextarea v-model="value" />
</template>
行数
使用 rows
prop 设置行数。默认为 3
。
<template>
<UTextarea :rows="12" />
</template>
占位符
使用 placeholder
属性设置占位文本。
<template>
<UTextarea placeholder="Type something..." />
</template>
自动调整大小
使用 autoresize
prop 启用 Textarea 高度的自动调整。
<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea.')
</script>
<template>
<UTextarea v-model="value" autoresize />
</template>
使用 maxrows
prop 设置自动调整大小时的最大行数。如果设置为 0
,Textarea 将无限增长。
<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.')
</script>
<template>
<UTextarea v-model="value" :maxrows="4" autoresize />
</template>
颜色
使用 color
prop 更改 Textarea 聚焦时的环形颜色。
<template>
<UTextarea color="neutral" highlight placeholder="Type something..." />
</template>
highlight
属性在此用于显示焦点状态。当发生验证错误时,它会在内部使用。变体
使用 variant
prop 更改 Textarea 的变体。
<template>
<UTextarea color="neutral" variant="subtle" placeholder="Type something..." />
</template>
尺寸
使用 size
prop 更改 Textarea 的大小。
<template>
<UTextarea size="xl" placeholder="Type something..." />
</template>
Icon
使用 icon
prop 在 Textarea 中显示一个 图标。
<template>
<UTextarea icon="i-lucide-search" size="md" variant="outline" placeholder="Search..." :rows="1" />
</template>
使用 leading
和 trailing
props 设置图标位置,或使用 leading-icon
和 trailing-icon
props 为每个位置设置不同的图标。
<template>
<UTextarea trailing-icon="i-lucide-at-sign" placeholder="Enter your email" size="md" :rows="1" />
</template>
Avatar
使用 avatar
prop 在 Textarea 中显示一个 头像。

<template>
<UTextarea
:avatar="{
src: 'https://github.com/nuxt.png'
}"
size="md"
variant="outline"
placeholder="Search..."
:rows="1"
/>
</template>
加载中
使用 loading
prop 在 Textarea 上显示加载图标。
<template>
<UTextarea loading placeholder="Search..." :rows="1" />
</template>
加载图标
使用 loading-icon
prop 自定义加载图标。默认为 i-lucide-loader-circle
。
<template>
<UTextarea loading loading-icon="i-lucide-loader" placeholder="Search..." :rows="1" />
</template>
禁用
使用 disabled
prop 禁用 Textarea。
<template>
<UTextarea disabled placeholder="Type something..." />
</template>
API
属性
属性 | 默认值 | 类型 |
---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
id |
| |
name |
| |
placeholder |
文本域为空时的占位文本。 | |
color |
|
|
variant |
|
|
尺寸 |
|
|
required |
| |
autofocus |
| |
autofocusDelay |
|
|
autoresize |
| |
autoresizeDelay |
|
|
disabled |
| |
rows |
|
|
maxrows |
|
|
高亮 |
高亮环形颜色,如同焦点状态。 | |
modelValue |
| |
defaultValue |
| |
modelModifiers |
| |
图标 |
根据 | |
avatar |
在左侧显示头像。
| |
前置 |
当为 | |
leadingIcon |
在左侧显示图标。 | |
尾部 |
当为 | |
trailingIcon |
在右侧显示图标。 | |
loading |
当为 | |
loadingIcon |
|
当 |
ui |
|
插槽
插槽 | 类型 |
---|---|
前置 |
|
default |
|
尾部 |
|
事件
事件 | 类型 |
---|---|
blur |
|
change |
|
update:modelValue |
|
可访问属性
通过模板引用访问组件时,您可以使用以下内容:
名称 | 类型 |
---|---|
textareaRef | Ref<HTMLTextAreaElement | null> |
主题
export default defineAppConfig({
ui: {
textarea: {
slots: {
root: 'relative inline-flex items-center',
base: [
'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
],
leading: 'absolute start-0 flex items-start',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute end-0 flex items-start',
trailingIcon: 'shrink-0 text-dimmed'
},
variants: {
buttonGroup: {
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 inset-y-1',
trailing: 'pe-2 inset-y-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated 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 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'
},
autoresize: {
true: {
base: 'resize-none'
}
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset 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'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
textarea: {
slots: {
root: 'relative inline-flex items-center',
base: [
'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
],
leading: 'absolute start-0 flex items-start',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute end-0 flex items-start',
trailingIcon: 'shrink-0 text-dimmed'
},
variants: {
buttonGroup: {
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 inset-y-1',
trailing: 'pe-2 inset-y-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated 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 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'
},
autoresize: {
true: {
base: 'resize-none'
}
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset 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'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
textarea: {
slots: {
root: 'relative inline-flex items-center',
base: [
'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
'transition-colors'
],
leading: 'absolute start-0 flex items-start',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute end-0 flex items-start',
trailingIcon: 'shrink-0 text-dimmed'
},
variants: {
buttonGroup: {
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 inset-y-1',
trailing: 'pe-2 inset-y-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated 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 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'
},
autoresize: {
true: {
base: 'resize-none'
}
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset 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'
}
}
}
})
]
})