文本输入 KLTextArea

基本形式

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

<kl-textarea  placeholder="请输入备注" />

表单项

在表单中使用

<kl-form>
    <kl-form-item title="备注">
        <kl-textarea placeholder="请输入备注" />
    </kl-form-item>
</kl-form>

验证

通过指定rules规则对文本进行验证

<kl-textarea rules={rules} placeholder="请输入邮箱, 失去焦点时验证" />

var component = new NEKUI.Component({
    template: template,
    data: {
        rules: [
            {type: 'isFilled', on: 'blur', message: '请输入邮箱！'},
            {type: 'isEmail', on: 'keyup+blur', message: '请输入正确的邮箱！'}
        ]
    }
});

限制输入长度

通过指定maxlength来限制输入内容长度

<kl-textarea  maxlength=100 placeholder="请输入备注" />

高宽设置

通过height和width设置输入框的高和宽

<kl-textarea height=100 width=400 placeholder="请输入备注"/>

字数实时统计

<p>最大长度{maxLength}字，已经输入了{(value || '').length}字</p>
<kl-textarea rules={rules} value={value} placeholder="请输入内容" />

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

KLTextArea

Param	Type	Default	Description
[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]	`boolean`	`false`	=> 是否自动获得焦点
[options.data.height]	`number`	`120`	=> 高度
[options.data.width]	`number`		=> 组件宽度
[options.data.required]	`boolean`	`false`	=> 是否必填
[options.data.message]	`string`		=> 必填校验失败提示的消息
[options.data.hideTip]	`boolean`	`false`	=> 是否显示校验错误信息
[options.data.readonly]	`boolean`	`false`	=> 是否只读
[options.data.disabled]	`boolean`	`false`	=> 是否禁用
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.class]	`string`		=> 补充class