组件
文本区域
显示一个文本区域字段。
用法
使用 v-model 使文本区域具有响应性。
<script setup lang="ts">
const value = ref('')
</script>
<template>
<UTextarea v-model="value" />
</template>
样式
使用 color 和 variant 属性更改文本区域的视觉样式。
<template>
<UTextarea color="primary" variant="outline" placeholder="Search..." />
</template>
除了 ui.colors 对象中的所有颜色之外，您还可以使用 white（默认）和 gray 颜色及其预定义变体。
白色
<template>
<UTextarea color="white" variant="outline" placeholder="Search..." />
</template>
灰色
<template>
<UTextarea color="gray" variant="outline" placeholder="Search..." />
</template>
尺寸
使用 size 属性更改文本区域的大小。
<template>
<UTextarea size="sm" />
</template>
占位符
使用 placeholder 属性设置占位符文本。
<template>
<UTextarea placeholder="Search..." />
</template>
行数
使用 rows 属性设置文本区域的行数。
<template>
<UTextarea :rows="1" placeholder="Search..." />
</template>
禁用
使用 disabled 属性禁用文本区域。
<template>
<UTextarea disabled placeholder="Search..." />
</template>
自动调整大小
使用 autoresize 属性启用自动调整大小。写入超过 rows 属性的行数将使文本区域向上增长。
<template>
<UTextarea
autoresize
placeholder="Search..."
model-value="Here is an autoresize Textarea, write new lines to make the Textarea grow up..."
/>
</template>
使用 maxrows 属性设置自动调整大小时的最大行数。如果设置为 0，则文本区域将无限向上增长。
<template>
<UTextarea
autoresize
:maxrows="5"
placeholder="Search..."
model-value="Here is an autoresize Textarea, write new lines to make the Textarea grow up at a maximum of 5 rows..."
/>
</template>
调整大小
使用 resize 属性启用调整大小控制。
<template>
<UTextarea resize placeholder="Search..." />
</template>
填充
使用 padded 属性删除文本区域的填充。
<template>
<UTextarea
:padded="false"
placeholder="Search..."
variant="none"
class="w-full"
/>
</template>
属性
名称
字符串
空尺寸
文本区域大小
空"md""2xs""xs""sm""lg""xl"颜色
字符串
config.default.colorui
{ form?: string; default?: DeepPartial<{ size: string; color: string; variant: string; }, any>; wrapper?: string; base?: string; rounded?: string; placeholder?: string; file?: DeepPartial<{ base: string; }, any>; ... 7 more ...; icon?: DeepPartial<...>; } & { ...; } & { ...; }
{}ID
字符串
空modelValue
字符串 | 数字
""变体
文本区域变体
config.default.variant"outline""none"占位符
字符串
空自动聚焦延迟
数字
100模型修饰符
{ trim?: boolean; lazy?: boolean; number?: boolean; nullify?: boolean; }
{}行数
数字
3maxrows
数字
0文本区域类
字符串
空必填
布尔值
false调整大小
布尔值
false禁用
布尔值
false自动聚焦
布尔值
false填充
布尔值
true自动调整大小
布尔值
false配置
{
wrapper: 'relative',
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
form: 'form-textarea',
rounded: 'rounded-md',
placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
file: {
base: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none'
},
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
},
gap: {
'2xs': 'gap-x-1',
xs: 'gap-x-1.5',
sm: 'gap-x-1.5',
md: 'gap-x-2',
lg: 'gap-x-2.5',
xl: 'gap-x-2.5'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
},
leading: {
padding: {
'2xs': 'ps-7',
xs: 'ps-8',
sm: 'ps-9',
md: 'ps-10',
lg: 'ps-11',
xl: 'ps-12'
}
},
trailing: {
padding: {
'2xs': 'pe-7',
xs: 'pe-8',
sm: 'pe-9',
md: 'pe-10',
lg: 'pe-11',
xl: 'pe-12'
}
},
color: {
white: {
outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
},
gray: {
outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
}
},
variant: {
outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
none: 'bg-transparent focus:ring-0 focus:shadow-none'
},
icon: {
base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
color: 'text-{color}-500 dark:text-{color}-400',
loading: 'animate-spin',
size: {
'2xs': 'h-4 w-4',
xs: 'h-4 w-4',
sm: 'h-5 w-5',
md: 'h-5 w-5',
lg: 'h-5 w-5',
xl: 'h-6 w-6'
},
leading: {
wrapper: 'absolute inset-y-0 start-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
}
},
trailing: {
wrapper: 'absolute inset-y-0 end-0 flex items-center',
pointer: 'pointer-events-none',
padding: {
'2xs': 'px-2',
xs: 'px-2.5',
sm: 'px-2.5',
md: 'px-3',
lg: 'px-3.5',
xl: 'px-3.5'
}
}
},
default: {
size: 'sm',
color: 'white',
variant: 'outline'
}
}