文本输入 KLTextArea

基本形式

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

<kl-textarea ref="textarea" placeholder="请输入备注" />
<kl-button title="聚焦后失焦" on-click={this.focus()} />
<kl-button title="选中" on-click={this.select()} />

var component = new NEKUI.Component({
    template: template,
    data: {
    },
    focus: function() {
        this.$refs.textarea.focus();
        setTimeout(() => {
            this.$refs.textarea.blur();
        }, 1000);
    },
    select: function() {
        this.$refs.textarea.select();
    }
});

大小控制

可通过设置size来控制输入文字的大小。

<kl-textarea size="lg" 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: '字数超出限制！'}
        ]
    }
});

自适应文本高度

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

var component = new NEKUI.Component({
    template: template,
    data: {
        maxLength: 10,
        value: '',
        autosize: {
            minRows: 2,
            maxRows: 6
        }
    }
});

API

KLTextArea

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.value]	`string`		<=> 文本框的值
[options.data.placeholder]	`string`		=> 占位符
[options.data.maxlength]	`number`		=> 文本框的最大长度
[options.data.rules]	`Array.<object>`	`[]`	=> 验证规则
[options.data.autofocus]	`boolean`	`false`	=> 是否自动获得焦点
[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.size]	`string`		=> 组件大小, sm/lg控制整体尺寸，smw/mdw/lgw控制宽度大小
[options.data.class]	`string`		=> 补充class

.focus 原生focus方法method

Param	Type	Description
无	`method`	使 textarea 获取焦点

.blur 原生blur方法method

Param	Type	Description
无	`method`	使 textarea 失去焦点

.select 原生select方法method

Param	Type	Description
无	`method`	使 textarea 选中