Textarea 文本域

显示表单文本域或看起来像文本域的组件。

基础用法

Value:

Example

自动高度

根据内容自动调整高度。

Example

禁用状态

Example

带标签

Your Message

Your message will be copied to the support team.

Example

带字符计数

Bio

I am a software engineer based in San Francisco. I love building things for the web.

84 / 100

Example

可清除

Example

错误状态

Error State

Please enter a valid message.

Example

尺寸

Extra Small (xs)

Small (sm)

Default

Medium (md)

Large (lg)

Extra Large (xl)

2X Large (2xl)

Example

调整大小行为

你可以使用 resize 属性控制调整大小的行为。

No Resize (none)

Vertical (Default)

Horizontal

Example

主题定制

你可以使用 Tailwind CSS 类自定义文本域的外观，或者通过覆盖全局 CSS 变量。

全局主题配置

BrTextarea 组件遵循 BrConfigProvider 提供的主题配置。

<script setup>
import { BrConfigProvider, BrTextarea } from '@breezeui/vue'

const theme = {
  primary: '#10b981', // Emerald 500
  radius: 0.75, // 0.75rem
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <BrTextarea placeholder="Themed Textarea" />
  </BrConfigProvider>
</template>

Tailwind 定制

你也可以使用 class 属性添加自定义样式：

<BrTextarea class="border-purple-500 focus-visible:ring-purple-500 min-h-[150px]" />

API

Props

属性名	类型	默认值	说明
modelValue	string | number	-	文本域的值。
defaultValue	string | number	-	文本域的默认值。
disabled	boolean	false	是否禁用文本域。
readonly	boolean	false	是否只读。
placeholder	string	-	占位文本。
size	default | xs | sm | md | lg | xl | 2xl	default	文本域尺寸。
error	boolean	false	是否显示错误状态。
clearable	boolean	false	是否显示清除按钮。
autoSize	boolean | object	false	是否自动调整高度。
rows	number | string	3	可见行数。
maxlength	number | string	-	允许的最大字符数。
showCount	boolean	false	是否显示字符计数（需要 maxlength）。
resize	none | vertical | horizontal | both	vertical	调整大小的行为。

Events

名称	参数	说明
update:modelValue	string | number	当文本域值变化时触发。
clear	-	当点击清除按钮时触发。
input	Event	当文本域值变化时触发。
change	Event	当文本域值变化时触发（blur）。
focus	Event	当文本域获得焦点时触发。
blur	Event	当文本域失去焦点时触发。