文本域 Textarea

基于原生组件 Textarea 封装,多行输入框组件,根据是否有内容、是否聚焦有折叠、展开两种状态。

基础案例

Textarea 可以通过placeholder 来显示自定义的占位文本。

示例代码

  1. <l-textarea placeholder="说说你的想法吧..." />

显示文本计数器

当我们通过 maxlength 设置了输入文本的最大长度后,还可以通过设置 indicatortrue 来显示文本计数器,如 0/140,

注意事项

  • 当设置 maxlength为-1 时, indicator属性不再生效

示例代码

  1. <l-textarea indicator="{{true}}" maxlength="140" placeholder="说说你的想法吧..." />

自动增高

当设置 auto-heighttrue 时, Textarea 组件会根据行数的变化自动增高,原始高度为88rpx

示例代码

  1. <l-textarea auto-height="{{true}}" />

校验规则

设置表单校验是为了在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误,我们可以通过 rules 属性来设置相对应的校验规则。

示例代码

  1. <l-textarea rules="rules" />

设置禁用

当我们需要将表单项禁用时,设置 disabledtrue 即可。

示例代码

  1. <l-textarea disabled="{{true}}" placeholder="禁止输入" />

文本域属性(Textarea Attributes)

参数说明类型可选值默认值
value输入框的值String
border控制文本区域border显示隐藏Booleantrue/falsetrue
placeholder占位文本String
focus获取焦点Booleantrue/falsefalse
indicator显示文字长度的计数器Booleantrue/falsetrue
maxlength最大输入长度,设置为 -1 的时候不限制最大长度Number140
auto-height是否自动增高,设置 auto-height 时,style.height 不生效Booleantrue/falsefalse
rules输入内容的校验规则object
fixed如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixedtrue| object
disabled设置是否禁用Booleantrue/falsefalse
placeholder-style设置输入框占位文本的内联样式String
tip-type校验错误提醒方式Stringtoast/message/text-

文本域外部样式类

外部样式类名说明备注
l-class设置 Textarea 组件的外部样式类
l-error-text-classtipType 为 text 时,错误提示信息外部样式类取代l-error-text
l-inner-class文本输入区域的外部样式类

已经弃用的外部样式类

以下这些外部样式类已经停止支持,将在未来的某个版本中去除,请使用上方的外部样式类替代。

外部样式类名说明备注
l-error-texttipType 为 text 时,错误提示信息外部样式类请使用 l-error-text-class替代

文本域事件 (Textarea Events)

事件名称说明返回值备注
bind:lininput键盘输入时触发输入框当前值 value-
bind:linfocus文本域聚焦时触发输入框当前值 value-
bind:linblur文本域失去焦点时触发输入框当前值 value-
bind:linconfirm点击完成按钮时触发输入框当前值 value-