• 文本域 Textarea
    • 基础案例
      • 示例代码
    • 显示文本计数器
      • 示例代码
    • 自动增高
      • 示例代码
    • 校验规则
      • 示例代码
    • 设置禁用
      • 示例代码
    • 文本域属性(Textarea Attributes)
    • 文本域事件 (Textarea Events)

    文本域 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 属性来设置相对应的校验规则。

    示例代码

    <l-textarea  rules="rules" />
    

    设置禁用

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

    示例代码

    <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-error-texttipType 为 text 时,错误提示信息外部样式类String
    l-class设置 Textarea 组件的外部样式类String

    文本域事件 (Textarea Events)

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