Skip to content

Textarea 多行输入框

基本表单组件,并在原生控件基础上进行了功能扩展。

基础用法

多行输入框的基本用法。

禁用状态

通过 disabled 属性指定是否禁用 textarea 组件。

可清空

使用 allowClear 属性即可得到一个可清空的输入框。

格式化

使用 formatter 属性显示格式化内容,通常需要搭配 parser 属性一起使用。

输入长度限制

使用 maxlength 和 minlength 属性,用来限制输入框的字符长度。字符长度是用 Javascript 的字符串长度统计的,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计。

0 / 10

可自适应文本高度

通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。

不同尺寸

tu-Textarea 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸:large、small、mini,通过设置 size 属性来配置它们。

Textarea API

Textarea Attributes

参数名描述类型默认值
v-model绑定值String Number-
size多行输入框尺寸Stringmedium
disabled是否禁用Boolean-
maxlength最大输入长度String Number-
minlength最小输入长度Number-
show-word-limit是否显示输入字数统计,只在 type 为 text 时有效Booleanfalse
placeholder输入框占位文本String-
allow-clear是否可清空Boolean-
rows多行输入框的行数number-
autosize多行输入框高度是否自适应。可以接受一个对象,比如:{minRows: 2, maxRows: 6}.boolean objectfalse
formatter指定值显示输入的格式。(仅当类型为 text 时有效)Function-
parser指定格式化输入值中提取的值。(仅当类型为 text 时有效)Function-
name原生属性String-
readonly原生属性,是否只读Booleanfalse
max原生属性,设置最大值--
min原生属性,设置最小值--
step原生属性,设置输入字段的合法数字间隔--
autofocus原生属性,自动获取焦点Booleanfalse
form原生属性String-
tabindex输入框的 tabindexString Number-
validate-event输入时是否触发表单的校验Booleantrue
textarea-styletextarea 元素的 styleString Object{}

Textarea Events

事件名描述参数
blur在 Textarea 失去焦点时触发Function
focus在 Textarea 获得焦点时触发Function
change仅在输入框失去焦点或用户按下回车时触发Function
input在 Textarea 值改变时触发Function
clear在点击由 clearable 属性生成的清空按钮时触发Function

Textarea Exposes

参数名描述类型
focusTextarea元素获得焦点Function
blurTextarea元素失去焦点Function
clear清空输入框的值Function
textareaHTML输入框元素object
refHTML元素object
select输入框元素选中的文字Function
resizeTextareaTextarea调整大小Function
textareaStyleTextarea样式object