输入扩展 InputField

示例

基本形式

基本用法与<input>一致。

<label>密码：<inputField type="password" maxlength=6 placeholder="请输入密码" autofocus /></label>

单位

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

验证

关于表单验证，详见表单验证组件。

<label>邮箱：<inputField maxlength=20 tip="请输入注册时的邮箱" rules={rules} /></label>

let component = new RGUI.Component({
    template,
    data: {
        rules: [
            { type: 'isFilled', trigger: 'blur', message: '邮箱不能为空！' },
            { type: 'isEmail', trigger: 'input+blur', message: '请输入正确的邮箱！' },
        ],
    },
});

API

Class

InputField

继承自。

Options

new InputField()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.value`	string	`''`	outside <=> inside	文本框的值
`data.type`	string	`''`	outside => inside	文本框的类型
`data.size`	string	`''`	outside <=> inside	文本框的尺寸
`data.state`	string	`''`	outside <=> inside	文本框的状态
`data.tip`	string	`''`	outside <=> inside	小贴示
`data.rules`	Object[]	`[]`	outside => inside	验证规则集
`data.placeholder`	string	`''`	outside => inside	文本框的占位文字
`data.maxlength`	number		outside => inside	文本框的最大长度
`data.autofocus`	boolean	`false`	outside => inside	是否自动获得焦点
`data.unit`	string	`''`	outside => inside	单位
`data.readonly`	boolean	`false`	outside => inside	是否只读
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class

Methods

inputField.focus()

使组件获得焦点

参数	类型	默认值
无参数
返回值	类型	描述
无返回值

inputField.blur()

使组件失去焦点

参数	类型	默认值
无参数
返回值	类型	描述
无返回值