输入框 KLInput

基本形式

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

<kl-input maxlength=6 placeholder="请输入" autofocus />

大小控制

可通过设置size来控制输入框的大小, 设置width来控制输入的宽度

sm: height=24px
md: height=32px

sm：
<kl-input size="sm" width="200px" placeholder="请输入"  />
&emsp;md：
<kl-input size="md" width="200px" placeholder="请输入"  />

单位

通过指定unit可在输入框末尾加上单位

速度：<kl-input value="340" unit="m/s" width="200px" />
&emsp;体重：<kl-input value="50" unit="kg" width="200px" />

表单项

<kl-form ref="form" labelSize="100px">
    <kl-form-item title="用户名" tip="请输入5-10位字母或者数字" required>
        <kl-input type="char" placeholder="请输入用户名" />
    </kl-form-item>
    <kl-form-item title="密码" tip="密码不能少于6位" required>
        <kl-input type="password" placeholder="请输入密码" />
    </kl-form-item>
    <kl-form-item title="年龄" required>
        <kl-input type="int" min=1 max=120 maxlength=3 placeholder="请输入年龄" />
    </kl-form-item>
    <kl-button type="secondary" title="提交" on-click={this.validate()} />
</kl-form>

var component = new NEKUI.Component({
    template: template,
    validate: function() {
        var $form = this.$refs.form;
        return $form.validate().success;
    }
});

输入框类型

通知指定type值限制输入框输入的内容

char: 任何字符串
int: 整型数
float：浮点数，可设置decimalDigits值来指定可输入几位小数

<kl-input class="f-mb10" type="char" placeholder="可输入任何字符串" value={char} />
<kl-input class="f-mb10" type="char" placeholder="可输入50个字以内的任何字符串" maxlength=50 value={char} />
<kl-input class="f-mb10" type="int" placeholder="可输入整数"  value={int} />
<kl-input class="f-mb10" type="float" placeholder="可输入浮点数"  value={float} />
<kl-input class="f-mb10" type="float" placeholder="可输入3位小数的浮点数" decimalDigits=3 value={float3} />

搜索(打开console,查看输出)

搜索：<kl-input width="200px" on-search={this.onSearch($event)} />

var component = new NEKUI.Component({
    template: template,
    onSearch: function(json) {
        console.log(json);
    }
});

清空输入内容

内容：<kl-input width="200px" clearable />

验证

通过rules设置验证规则

<label>邮箱：<kl-input rules={rules} maxlength=20 /></label>

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

API

KLInput

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.value]	`string`		<=> 文本框的值
[options.data.type]	`string`		=> 文本框的类型, 6种类型：int, float, char，password （email, url暂未实现），
[options.data.placeholder]	`string`		=> 占位符
[options.data.state]	`string`		<=> 文本框的状态
[options.data.maxlength]	`number`		=> 文本框的最大长度
[options.data.unit]	`string`		=> 单位
[options.data.clearable]	`boolean`	`false`	=> 是否显示清空图标
[options.data.rules]	`Array.<object>`	`[]`	=> 验证规则
[options.data.autofocus]	`boolean`	`false`	=> 是否自动获得焦点
[options.data.readonly]	`boolean`	`false`	=> 是否只读
[options.data.disabled]	`boolean`	`false`	=> 是否禁用
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.class]	`string`		=> 补充class
[options.data.decimalDigits]	`number`		=> type=float时,最多输入几位小数的filter
[options.data.required]	`boolean`		=> 【验证规则】是否必填
[options.data.hideTip]	`boolean`	`false`	=> 是否显示校验错误信息
[options.data.min]	`number`		=> 【验证规则】type=int/float时的最小值, type=char时，最小长度
[options.data.max]	`number`		=> 【验证规则】type=int/float时的最大值, type=char时，最大长度
[options.data.message]	`string`		=> 【验证规则】验证失败时，提示的消息
[options.data.size]	`string`		=> 组件大小, sm/md
[options.data.width]	`number`		=> 组件宽度

keyup 原生keyup事件Event

Param	Type	Description
MouseEvent	`event`	点击的鼠标事件

blur 原生blur事件Event

Param	Type	Description
MouseEvent	`event`	点击的鼠标事件

focus 原生focus事件Event

Param	Type	Description
MouseEvent	`event`	点击的鼠标事件

change 原生change事件Event

Param	Type	Description
KeyBoardEvent	`event`	点击的鼠标事件

input 原生input事件Event

Param	Type	Description
KeyBoardEvent	`event`	点击的鼠标事件

search 点击搜索图标时触发Event

Param	Type	Description
MouseEvent	`event`	点击的鼠标事件