BreezeUI
  • 简体中文

    • Textarea 文本域

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

    组件特性

    • 📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl、default 尺寸规格。
    • 📐 自动高度：支持 autoSize 属性根据内容自动调整高度。
    • ❌ 清除按钮：支持 clearable 属性显示清除按钮。
    • ⚠️ 错误状态：支持 error 属性显示错误状态。
    • 📝 字符计数：支持 showCount 和 maxlength 属性显示字符计数。
    • 🔄 调整大小：支持 resize 属性控制调整大小的行为（none/vertical/horizontal/both）。
    • 📝 只读/禁用：支持 readonly 和 disabled 属性。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    <script setup>
import { ref } from 'vue'
const text = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrTextarea v-model="text" placeholder="Type your message here." />
    <p class="text-xs text-muted-foreground">Value: {{ text }}</p>
  </div>
</template>

    自动高度

    根据内容自动调整高度。

    <script setup>
import { ref } from 'vue'
const message = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrTextarea 
      v-model="message" 
      placeholder="Type many lines to see auto resize..." 
      auto-size 
    />
  </div>
</template>

    禁用状态

    <template>
<div class="space-y-2">
  <BrTextarea disabled placeholder="Disabled Textarea" />
</div>
</template>

    带标签

    <template>
<div class="grid w-full gap-1.5">
  <BrLabel for="message-2">Your Message</BrLabel>
  <BrTextarea id="message-2" placeholder="Type your message here." />
  <p class="text-sm text-muted-foreground">
    Your message will be copied to the support team.
  </p>
</div>
</template>

    带字符计数

    <script setup>
import { ref } from 'vue'
const bio = ref('I am a software engineer based in San Francisco. I love building things for the web.')
</script>

<template>
  <div class="space-y-2">
    <BrLabel for="bio">Bio</BrLabel>
    <BrTextarea 
      id="bio" 
      v-model="bio" 
      placeholder="Tell us about yourself." 
      :maxlength="100" 
      show-count 
    />
  </div>
</template>

    可清除

    <template>
<div class="space-y-2">
  <BrTextarea placeholder="Type to see clear button" clearable />
</div>
</template>

    错误状态

    <template>
<div class="grid w-full gap-1.5">
  <BrLabel for="message-error">Error State</BrLabel>
  <BrTextarea id="message-error" placeholder="Type here..." error />
  <p class="text-sm text-destructive">
    Please enter a valid message.
  </p>
</div>
</template>

    尺寸

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

<template>
  <div class="grid w-full gap-4">
    <div class="grid w-full gap-1.5">
      <BrLabel>Extra Small (xs)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="xs" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Small (sm)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="sm" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Default</BrLabel>
      <BrTextarea placeholder="Type your message here." />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Medium (md)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="md" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Large (lg)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="lg" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Extra Large (xl)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="xl" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>2X Large (2xl)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="2xl" />
    </div>
  </div>
</template>

    调整大小行为

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

    <template>
<div class="grid w-full gap-4">
  <div class="grid w-full gap-1.5">
    <BrLabel>No Resize (none)</BrLabel>
    <BrTextarea placeholder="Cannot resize" resize="none" />
  </div>
  <div class="grid w-full gap-1.5">
    <BrLabel>Vertical (Default)</BrLabel>
    <BrTextarea placeholder="Resize vertically" resize="vertical" />
  </div>
  <div class="grid w-full gap-1.5">
    <BrLabel>Horizontal</BrLabel>
    <BrTextarea placeholder="Resize horizontally" resize="horizontal" />
  </div>
</div>
</template>

    主题定制

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

    全局主题配置

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

    
<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

    属性名类型默认值说明
    modelValuestring | number-文本域的值。
    defaultValuestring | number-文本域的默认值。
    disabledbooleanfalse是否禁用文本域。
    readonlybooleanfalse是否只读。
    placeholderstring-占位文本。
    sizedefault | xs | sm | md | lg | xl | 2xldefault文本域尺寸。
    errorbooleanfalse是否显示错误状态。
    clearablebooleanfalse是否显示清除按钮。
    autoSizeboolean | objectfalse是否自动调整高度。
    rowsnumber | string3可见行数。
    maxlengthnumber | string-允许的最大字符数。
    showCountbooleanfalse是否显示字符计数（需要 maxlength）。
    resizenone | vertical | horizontal | bothvertical调整大小的行为。

    Events

    名称参数说明
    update:modelValuestring | number当文本域值变化时触发。
    clear-当点击清除按钮时触发。
    inputEvent当文本域值变化时触发。
    changeEvent当文本域值变化时触发（blur）。
    focusEvent当文本域获得焦点时触发。
    blurEvent当文本域失去焦点时触发。