代码演示

基本形式

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

<ui.input type="password" maxlength=6 placeholder="请输入密码" autofocus />

表单项

在表单中使用

<ui.form>
    <form.item cols="6" title="用户名" tip="用户名的用途" required>
        <ui.input type="password" maxlength=6 placeholder="请输入密码" autofocus required />
    </form.item>
    <form.item cols="6" labelCols=4 title="密码" tip="密码的用途">
        <ui.input type="password" maxlength=6 placeholder="请输入密码" autofocus />
    </form.item>
</ui.form>

单位

<label>速度：<ui.input width="smw" value="340" unit="m/s" /></label>

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

<label>速度：<ui.input width="smw" on-search={this.onSearch($event)} /></label>
var component = new NEKUI.Component({
    template: template,
    onSearch: function(json) {
        console.log(json);
    }
});

type=int/float, 固定输入小数位

<div class="g-row">
    <div class="g-col g-col-6">
        <ui.input type="int" placeholder="请输入整数" value={value1} />
        {value1}
    </div>
    <div class="g-col g-col-6">
        <ui.input type="float" placeholder="保留三位小数" decimalDigits=3 value={value2} />
        {value2}
    </div>
</div>

验证

<label>邮箱：<ui.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

Classes

Input

Members

Component

Input 输入扩展

Functions

config()
rules()
addRule()
validate() 根据rules验证组件的值是否正确() ⇒ object
__valueFilter()
  1. type=char时,去除前后的空格;
  2. type=int/float时, 只能输入对应类型的数字;

Input

Kind: global class
Extend: Component

new Input()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.value] string <=> 文本框的值
[options.data.type] string => 文本框的类型, 6种类型：int, float, email, url，char，password
[options.data.placeholder] string => 占位符
[options.data.state] string <=> 文本框的状态
[options.data.maxlength] number => 文本框的最大长度
[options.data.unit] string => 单位
[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/lg
[options.data.width] number => 组件宽度

Component

Input 输入扩展

Kind: global variable

Author: sensen(rainforest92@126.com)

config()

Kind: global function
Access: protected

rules()

Kind: global function

addRule()

Kind: global function
Access: protected

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

Kind: global function
Returns: object - result 结果
Access: public

__valueFilter()

  1. type=char时,去除前后的空格;
  2. type=int/float时, 只能输入对应类型的数字;

Kind: global function

← 表单 下拉选择 →
想让文档更完善？ 来 GitHub 提个 PR 吧！