输入框 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 ref="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 title="提交" on-click={this.validate()} />
    <kl-button title="聚焦后失焦" on-click={this.focus()} />
    <kl-button title="选中" on-click={this.select()} />
</kl-form>
var component = new NEKUI.Component({
    template: template,
    validate: function() {
        var $form = this.$refs.form;
        return $form.validate().success;
    },
    focus: function() {
        this.$refs.input.focus();
        setTimeout(() => {
            this.$refs.input.blur();
        }, 1000);
    },
    select: function() {
        this.$refs.input.select();
    }
});

输入框类型

通知指定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

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.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/lg控制整体尺寸，smw/mdw/lgw控制宽度大小
[options.data.width] number => 组件宽度

.focus 原生focus方法method

Param Type Description
无 method 使 input 获取焦点

.blur 原生blur方法method

Param Type Description
无 method 使 input 失去焦点

.select 原生select方法method

Param Type Description
无 method 使 input 选中

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 点击的鼠标事件
Group 多级选择
想让文档更完善？ 来 GitHub 提个 PR 吧！