开发预览更新于 2026-05-10

Textarea 多行输入

多行输入 —— 与 Input 同色系，支持自动撑高、字符计数、resize 控制。

基础用法

视觉与 Input 共用一套色系。rows 控制初始行数，用户可以拖右下角调整高度。

<script setup lang="ts">
import { ref } from 'vue';
import { CfTextarea } from '@chufix-design/vue';

const note = ref('');
</script>

<template>
<CfTextarea v-model="note" placeholder="说点什么…" :rows="3" />
</template>

import { useState } from 'react';
import { CfTextarea } from '@chufix-design/react';

export default function Demo() {
const [note, setNote] = useState('');
return (
  <CfTextarea
    value={note}
    onChange={(e) => setNote(e.target.value)}
    placeholder="说点什么…"
    rows={3}
  />
);
}

字符计数

maxlength 设上限（原生限制），show-count 在右下角显示当前字符数。超过上限会变红（虽然 maxlength 会先拦截）。

0 / 50

<CfTextarea
v-model="bio"
placeholder="个人简介（最多 50 字）"
:rows="3"
:maxlength="50"
show-count
/>

<CfTextarea
value={bio}
onChange={(e) => setBio(e.target.value)}
placeholder="个人简介（最多 50 字）"
rows={3}
maxLength={50}
showCount
/>

自动撑高

auto-resize 让框跟随内容增长，自动隐藏 resize 把手。适合不确定行数的场景（如评论、备注）。

<CfTextarea
v-model="draft"
variant="filled"
auto-resize
placeholder="自动撑高的多行输入"
/>

<CfTextarea
value={draft}
onChange={(e) => setDraft(e.target.value)}
variant="filled"
autoResize
placeholder="自动撑高的多行输入"
/>

API

Prop	类型	默认值	说明
`variant`	`'outline' \| 'filled' \| 'ghost'`	`'outline'`	视觉变体，与 Input 一致
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号 / 内边距
`rows`	`number`	`3`	初始行数
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	用户拖拽 resize 行为
`autoResize`	`boolean`	`false`	内容增减时自动调整高度（覆盖 `resize`）
`error`	`boolean`	`false`	错误状态边框 / 焦点环
`maxlength`	`number`	—	字符上限（属性名 React 端为 `maxLength`）
`showCount`	`boolean`	`false`	右下角显示字符计数