Skip to content

Textarea 文本域 0.2.0

用于输入多行文本信息。

基本用法

可以通过 v-model 双向绑定输入框的值,通过 placeholder 设置占位提示文字。

html
<wd-textarea v-model="value" placeholder="请填写评价" />
typescript
const value = ref<string>('')

禁用

通过设置 disabled 属性,实现禁用文本域。

html
<wd-textarea v-model="value" disabled></wd-textarea>

只读

通过设置 readonly 属性,实现文本域只读。

html
<wd-textarea v-model="value" readonly></wd-textarea>

清空按钮

通过设置 clearable 属性实现清空按钮,设置show-word-limitmaxlength实现字数限制。

html
<wd-textarea v-model="value" :maxlength="120" clearable show-word-limit />

有值且聚焦时展示清空按钮

设置 clear-trigger 属性,可以控制是否聚焦时才展示清空按钮。

注意

支付宝小程序暂不支持 clear-trigger 属性,且某种情况下清空按钮无法点击,原因参考此issue(希望可以早点解决,所以直接给蚂蚁的组件库提了个issue)。

html
<wd-textarea clear-trigger="focus" v-model="value14" :maxlength="120" clearable show-word-limit />

点击清除按钮时不自动聚焦

设置focus-when-clear 属性,可以控制点击清除按钮时是否自动聚焦。

html
 <wd-textarea v-model="value" :focus-when-clear="false" :maxlength="120" clearable show-word-limit />

高度自适应

通过设置 auto-height 属性,实现高度自适应。

html
<wd-textarea v-model="value" auto-height />

前置 icon

设置前置 icon prefix-icon,icon 为 icon 章节中的图标,如果没有你需要的图标,则使用 prefix 插槽进行自定义插入。

html
<wd-textarea v-model="value" prefix-icon="dong"></wd-textarea>

设置 label 标题

设置 label 标题,可以和 cell-group 组合使用,形成 cell 展示类型。可以通过 label-width 设置标题宽度,默认为 '33%'。

html
<wd-cell-group border>
  <wd-textarea label="基本用法" clearable v-model="value" placeholder="请输入..." />
</wd-cell-group>

必填样式

设置了 label 的情况下,设置 required 属性,展示必填样式。

html
<wd-textarea v-model="value" placeholder="请输入..." label="必填" required></wd-textarea>

输入框大小

通过设置 size 修改输入框大小,将 size 设置为 'large' 时字号为 16px。

html
<wd-textarea label="基本用法" size="large" v-model="value" placeholder="请输入..." />

错误状态

设置 error 属性,输入框的值显示为红色。

html
<wd-textarea v-model="value" placeholder="请输入用户名" error />

垂直居中

当设置 label 标题时,默认为顶部居中,设置 center 属性可以使标题和输入框垂直居中。

html
<wd-textarea label="基本用法" v-model="value" center />

Attributes

参数说明类型可选值默认值最低版本
v-model绑定值string/number---
placeholder占位文本string-请输入...-
placeholderStyle原生属性,指定 placeholder 的样式string---
placeholderClass原生属性,指定 placeholder 的样式类string---
disabled原生属性,禁用boolean-false-
maxlength原生属性,最大输入长度,设置为 -1 的时候不限制最大长度number---
auto-focus原生属性,自动聚焦,拉起键盘。boolean-false-
focus原生属性,获取焦点boolean-false-
auto-height原生属性,是否自动增高,设置 auto-height 时,style.height 不生效boolean-false-
fixed如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true-false-
cursorSpacing原生属性,指定光标与键盘的距离。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离number-0-
cursor原生属性,指定 focus 时的光标位置number--1-
confirm-type设置键盘右下角按钮的文字stringdone / go / next / search / send--
confirm-hold点击键盘右下角按钮时是否保持键盘不收起Boolean-false-
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏Boolean-true-
selection-start原生属性,光标起始位置,自动聚集时有效,需与 selection-end 搭配使用number--1-
selection-end原生属性,光标结束位置,自动聚集时有效,需与 selection-start 搭配使用number--1-
adjust-position原生属性,键盘弹起时,是否自动上推页面boolean-true-
disable-default-padding原生属性,是否去掉 iOS 下的默认内边距boolean-false-
hold-keyboard原生属性,focus 时,点击页面的时候不收起键盘boolean-false-
show-password显示为密码框boolean-false-
clearable显示清空按钮boolean-false-
readonly只读boolean-false-
prefix-icon前置图标,icon 组件中的图标类名string---
use-prefix-slot使用 前置图标 插槽boolean-false-
show-word-limit显示字数限制,需要同时设置 maxlengthboolean-false-
label设置左侧标题string---
label-width设置左侧标题宽度string-33%-
use-label-slot使用 label 插槽boolean-false-
size设置输入框大小string---
error设置输入框错误状态,错误状态时为红色boolean-false-
center当有 label 属性时,设置标题和输入框垂直居中,默认为顶部居中boolean-false-
no-border非 cell 类型下是否隐藏下划线boolean-false-
requiredcell 类型下必填样式boolean-false-
prop表单域 model 字段名,在使用表单校验功能的情况下,该属性是必填的string---
rules表单验证规则FormItemRule []-[]-
clearTrigger显示清除图标的时机,always 表示输入框不为空时展示,focus 表示输入框聚焦且不为空时展示InputClearTriggerfocus / alwaysalways1.3.7
focusWhenClear是否在点击清除按钮时聚焦输入框boolean-true1.3.7
ignoreCompositionEvent是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件,且在文本合成期间会触发 input 事件。boolean-true1.3.11

FormItemRule 数据结构

键名说明类型
required是否为必选字段boolean
message错误提示文案string
validator通过函数进行校验,可以返回一个 Promise 来进行异步校验(value, rule) => boolean | Promise
pattern通过正则表达式进行校验,正则无法匹配表示校验不通过RegExp

Events

事件名称说明参数最低版本
input监听输入框 input 事件 {value, cursor, keyCode}-
focus监听输入框 focus 事件 { value, height }, height 为键盘高度-
blur监听输入框 blur 事件 { value }-
change监听输入框修改事件 { value }-
clear监听输入框清空按钮事件--
linechange监听输入框行数变化 { height: 0, heightRpx: 0, lineCount: 0 }-
confirm点击完成时, 触发 confirm 事件 { value }-
keyboardheightchange键盘高度发生变化的时候触发此事件 { height, duration }-
clickprefixicon点击前置图标时触发--
clicksuffixicon点击后置图标时触发--

Slot

提示

使用插槽需要配置是否启用对应的插槽,分别对应use-label-slotuse-prefix-slot

name说明最低版本
label左侧标题插槽-
prefix前置插槽-

外部样式类

类名说明最低版本
custom-class根节点样式-
custom-textarea-container-classtextarea 容器外部自定义样式-
custom-textarea-classtextarea 外部自定义样式-

Released under the MIT License.

Released under the MIT License.