You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.5 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

title description spline isComponent
Textarea 多行文本框 用于多行文本信息输入。 form true

引入

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-textarea": "tdesign-miniprogram/textarea/textarea"
}

代码演示

组件类型

基础多行文本框

{{ base }}

带标题多行文本框

{{ label }}

自动增高多行文本框

{{ autosize }}

设置最大字符个数

{{ maxlength }}

设置最大字符个数,一个汉字表示两个字符

{{ maxcharacter }}

组件状态

禁用多行文本框

{{ disabled }}

自定义组件样式

标签外置输入框

{{ custom }}

提示

  • 如果需要在页面中调整 textareaplaceholder 样式,请使用名称为t-textarea__placeholder的Class选择器直接覆盖组件内部样式注意权重

API

Textarea Props

名称 类型 默认值 说明 必传
adjust-position Boolean true 键盘弹起时,是否自动上推页面 N
autofocus Boolean false 自动聚焦,拉起键盘 N
autosize Boolean false 是否自动增高,值为 autosize 时style.height 不生效 N
confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起点 N
confirm-type String done 设置键盘右下角按钮的文字,仅在 type='text'时生效。可选项send/search/next/go/done。TS 类型:'return' | 'send' | 'search' | 'next' | 'go' | 'done' N
cursor-spacing Number 0 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 N
disabled Boolean false 是否禁用文本框 N
external-classes Array - 组件类名,分别用于表示组件外层元素、输入框、占位符、标签名等元素类名。['t-class', 't-class-textarea', 't-class-label, 't-class-indicator] N
focus Boolean false 自动聚焦 N
label String / Slot - 左侧文本 N
maxcharacter Number - 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度 N
maxlength Number -1 用户最多可以输入的字符个数。默认为 -1不限制输入长度 N
indicator Boolean false 显示文本计数器,如 0/140。当 maxlength < 0 && maxcharacter < 0 成立时, indicator无效 N
placeholder String undefined 占位符 N
placeholderStyle String '' 指定 placeholder 的样式,目前仅支持 color ,font-size和font-weight N
value String - 文本框值 N
default-value String undefined 文本框值。非受控属性 N
fixed Boolean false 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true N
bordered Boolean false 是否显示外边框 N
cursor Number -1 指定 focus 时的光标位置 N
disable-default-padding Boolean false 是否去掉 iOS 下的默认内边距 N
show-confirm-bar Boolean true 是否显示键盘上方带有”完成“按钮那一栏 N
selection-start Number -1 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 N
selection-end Number -1 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 N
hold-keyboard Boolean false focus时点击页面的时候不收起键盘 N

Textarea Events

名称 参数 描述
blur (value: TextareaValue) 失去焦点时触发
change (value: TextareaValue) 输入内容变化时触发
enter (value: TextareaValue) 点击完成时触发
focus (value: TextareaValue) 获得焦点时触发
line-change (value: TextareaValue) 行高发生变化时触发
keyboardheightchange (height: number, duration: number) 键盘高度发生变化的时候触发此事件