代码演示

基本形式

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

输入框 ui.input - 图1

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

表单项

在表单中使用

输入框 ui.input - 图2

  1. <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>

单位

输入框 ui.input - 图3

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

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

输入框 ui.input - 图4

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

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

输入框 ui.input - 图5

  1. <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>

验证

输入框 ui.input - 图6

  1. <label>邮箱：<ui.input rules={rules} maxlength=20 /></label>
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            rules: [
                {type: 'isFilled', on: 'blur', message: '请输入邮箱！'},
                {type: 'isEmail', on: 'keyup+blur', message: '请输入正确的邮箱！'}
            ]
        }
    });

API

Classes

Members

Input 输入扩展

Functions

Input

Kind: global classExtend: Component

new Input()

ParamTypeDefaultDescription
[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]booleanfalse=> 是否自动获得焦点
[options.data.readonly]booleanfalse=> 是否只读
[options.data.disabled]booleanfalse=> 是否禁用
[options.data.visible]booleantrue=> 是否显示
[options.data.class]string=> 补充class
[options.data.decimalDigits]number=> type=float时,最多输入几位小数的filter
[options.data.required]boolean=> 【验证规则】是否必填
[options.data.hideTip]booleanfalse=> 是否显示校验错误信息
[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 functionAccess: protected

rules()

Kind: global function

addRule()

Kind: global functionAccess: protected

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

Kind: global functionReturns: object - result 结果Access: public

__valueFilter()

  • type=char时,去除前后的空格;
  • type=int/float时, 只能输入对应类型的数字; Kind: global function