Textarea 多行文本框

基础多行文本框

用于多行文本的输入。

限制最大字符数

限制输入的最大字符数并展示字符数。

这里可以放一些提示文字

0/20

绑定 DOM 事件

可绑定 onKeypress onKeydown onKeyup onFocus onBlur 等 DOM 原生事件。

不同状态的多行文本框

多行文本框状态可分为：正常、禁用、异常、带额外内容提示。

这是普通文本提示

校验通过文本提示

校验不通过文本提示

校验存在严重问题文本提示

Textarea Props

名称	类型	默认值	说明	必传
allowInputOverMax	Boolean	false	超出maxlength或maxcharacter之后是否还允许输入	N
autofocus	Boolean	false	自动聚焦，拉起键盘	N
autosize	Boolean / Object	false	高度自动撑开。 autosize = true 表示组件高度自动撑开，同时，依旧允许手动拖高度。如果设置了 autosize.maxRows 或者 autosize.minRows 则不允许手动调整高度。TS 类型：`boolean \| { minRows?: number; maxRows?: number }`	N
disabled	Boolean	false	是否禁用文本框	N
label	String / Slot / Function	-	左侧文本。TS 类型：`string \| TNode`。通用类型定义	N
maxcharacter	Number	-	用户最多可以输入的字符个数，一个中文汉字表示两个字符长度	N
maxlength	Number / String	-	用户最多可以输入的字符个数	N
name	String	-	名称，HTML 元素原生属性	N
placeholder	String	undefined	占位符	N
readonly	Boolean	false	只读状态	N
status	String	-	文本框状态。可选项：default/success/warning/error	N
tips	String / Slot / Function	-	输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。通用类型定义	N
value	String / Number	-	文本框值。支持语法糖 `v-model`。TS 类型：`TextareaValue` `type TextareaValue = string`。详细类型定义	N
defaultValue	String / Number	-	文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string`。详细类型定义	N
onBlur	Function		TS 类型：`(value: TextareaValue, context: { e: FocusEvent }) => void` 失去焦点时触发	N
onChange	Function		TS 类型：`(value: TextareaValue, context?: { e?: InputEvent }) => void` 输入内容变化时触发	N
onFocus	Function		TS 类型：`(value: TextareaValue, context : { e: FocusEvent }) => void` 获得焦点时触发	N
onKeydown	Function		TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void` 键盘按下时触发	N
onKeypress	Function		TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void` 按下字符键时触发（keydown -> keypress -> keyup）	N
onKeyup	Function		TS 类型：`(value: TextareaValue, context: { e: KeyboardEvent }) => void` 释放键盘时触发	N

Textarea Events

名称	参数	描述
blur	`(value: TextareaValue, context: { e: FocusEvent })`	失去焦点时触发
change	`(value: TextareaValue, context?: { e?: InputEvent })`	输入内容变化时触发
focus	`(value: TextareaValue, context : { e: FocusEvent })`	获得焦点时触发
keydown	`(value: TextareaValue, context: { e: KeyboardEvent })`	键盘按下时触发
keypress	`(value: TextareaValue, context: { e: KeyboardEvent })`	按下字符键时触发（keydown -> keypress -> keyup）
keyup	`(value: TextareaValue, context: { e: KeyboardEvent })`	释放键盘时触发

组件名	何时使用
多行文本	当需要输入的字段数量较多或换行次数较多时；当用户需要以复制粘贴方式输入大段字符串时。
输入框	需要用户录入信息时；需要对用户录入的进行进行即时的反馈时。

Textarea 多行文本框

基础多行文本框

限制最大字符数

绑定 DOM 事件

不同状态的多行文本框

Textarea Props

Textarea Events

何时使用

与页面布局相关

在整体页面中，常与输入类和沟通类组件布局在一起，有左对齐、右对齐和顶对齐三种方式，来满足视觉流程或信息分类的需要。

组件搭配使用

与文字提示搭配使用，可提示多行文本框的限制内容或过程中出现的错误，引导用户正确完成信息输入。

与按钮搭配使用，可以为用户提供与输入内容相关联的具体操作，用以提交、发送或保存输入的文本信息。

推荐/慎用示例

当输入的信息有具体的格式限制时（如表单、表格的内容），应使用对应格式的输入类组件，而不是多行文本框。

在筛选数据时，如有多个限制选项，不应使用多行文本进行筛选，应使用下拉框、单选框、多选框等。

相似组件