代码演示

基本形式

大部分属性的用法与<textarea>一致。

文本输入 ui.textarea - 图1

  1. <label>备注：<ui.textarea placeholder="请输入备注" /></label>

表单项

在表单中使用

文本输入 ui.textarea - 图2

  1. <ui.form>
        <form.item cols="12" title="备注" hint="写点备注吧">
            <ui.textarea placeholder="请输入备注" />
        </form.item>
    </ui.form>

验证

文本输入 ui.textarea - 图3

  1. <label>邮箱：<ui.textarea rules={rules} maxlength=20 /></label>
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            rules: [
                {type: 'isFilled', on: 'blur', message: '请输入邮箱！'},
                {type: 'isEmail', on: 'keyup+blur', message: '请输入正确的邮箱！'}
            ]
        }
    });

字数实时统计

文本输入 ui.textarea - 图4

  1. <label>
    最大长度{maxLength}字，已经输入了{(value || '').length}字
    <ui.textarea rules={rules} value={value} />
    </label>
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            maxLength: 10,
            value: '',
            rules: [
                {method: function(text) {
                    return (text || '').length <= component.data.maxLength;
                }, on: 'keyup+blur', message: '字数超出限制！'}
            ]
        }
    });

API

Classes

Members

TextArea2 输入扩展

Functions

TextArea

Kind: global classExtend: Component

new TextArea()

ParamTypeDefaultDescription
[options.data]object= 绑定属性
[options.data.value]string<=> 文本框的值
[options.data.placeholder]string=> 占位符
[options.data.state]string<=> 文本框的状态
[options.data.maxlength]number=> 文本框的最大长度
[options.data.rules]Array.<object>[]=> 验证规则
[options.data.autofocus]booleanfalse=> 是否自动获得焦点
[options.data.height]number120=> 高度
[options.data.required]booleanfalse=> 是否必填
[options.data.message]string"''"=> 必填校验失败提示的消息
[options.data.hideTip]booleanfalse=> 是否显示校验错误信息
[options.data.readonly]booleanfalse=> 是否只读
[options.data.disabled]booleanfalse=> 是否禁用
[options.data.visible]booleantrue=> 是否显示
[options.data.class]string=> 补充class
[options.data.size]string=> 组件大小, sm/md/lg
[options.data.width]number=> 组件宽度

Component

TextArea2 输入扩展

Kind: global variable

Author: sensen(rainforest92@126.com)

config()

Kind: global functionAccess: protected

validate() 根据rules验证组件的值是否正确() ⇒ object

Kind: global functionReturns: object - result 结果Access: public