多行输入扩展 TextField
示例
基本形式
大部分属性的用法与<textarea>
一致。
<label>备注:<textField placeholder="请输入备注" /></label>
验证
关于表单验证,详见表单验证组件。
<label>邮箱:<textField rules={rules} maxlength=20 /></label>
let component = new RGUI.Component({
template,
data: {
rules: [
{ type: 'isFilled', trigger: 'blur', message: '请输入邮箱!' },
{ type: 'isEmail', trigger: 'input+blur', message: '请输入正确的邮箱!' },
],
},
});
API
Class
TextField
继承自。
Options
new TextField()
参数 | 类型 | 默认值 | 数据流向 | 描述 |
---|---|---|---|---|
data | Object | 绑定属性 | ||
data.value | 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.readonly | boolean | false | outside => inside | 是否只读 |
data.disabled | boolean | false | outside => inside | 是否禁用 |
data.visible | boolean | true | outside => inside | 是否显示 |
data.class | string | '' | outside => inside | 补充class |
Methods
textField.focus()
使组件获得焦点
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
无参数 | |||
返回值 | 类型 | 描述 | |
无返回值 |
textField.blur()
使组件失去焦点
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
无参数 | |||
返回值 | 类型 | 描述 | |
无返回值 |