nuke-base-input
v2.1.1-1 nuke nuke-base-input
BaseInput
- category: Components
- chinese: 基础输入框
- type: 基本
API
Props
Props | Description | type | default | Accepted Values |
---|---|---|---|---|
multiple | 多行 | boolean | false | |
type | 输入类型 | String | text |
text date tel number |
disabled | 是否禁用 | boolean | false | |
readOnly | 是否只读 | Boolean | false | |
maxLength | 最大长度,只有 type = text 才生效 |
number | - | |
onInput | 输入事件 | function(value, e) |
false | |
onFocus | Focus 事件 | function |
false | |
onBlur | Blur 事件 | function |
false | |
onChange | change | function(value, e) |
||
onReturn | 点击虚拟键盘右下角的键触发的事件,在 native 端使用原生事件,web 端使用 keyup 且 charCode = 13 代替。返回值 e {returnKeyType:'类型',value:'输入框的值'} | function(e) |
false | |
returnKeyType | 虚拟键盘右下角的文案,目前只在 native 有效 | string | default |
default go next search send done |
rows | multiple = true 时,可同时显示的行数 |
number | 2 | |
placeholder | placeholder 文本 | string | - | |
placeholderColor | placeholder 颜色,仅 native 有效 | string | '#999999' |
实例方法
focus()
让 input 获得焦点
blur() 让 input 失去焦点
getValue() 获取输入框的值
setNativeFormatRule(rules) [weex 0.17+] 设置 native 中对实时输入内容格式化的规则,这个方法常用于前端无法解决的 native 双向绑定的场景。
以下 demo 给出在客户端上信用卡卡号输入时,每输入 4 个数字自动加入一个空格的场景:
const rules={ formatRule: '/(\\d{4})(?!$)/g', formatReplace: '$1 ', recoverRule: '/(\\s*)/g', recoverReplace: '', } componentDidMount() { if (isWeb) { //... } else { setTimeout(() => { this.refs['text-field'] && this.refs['text-field'].setNativeFormatRule(rules); }, 500); } }
npm i [email protected]
Source Code
[email protected]:n...Metadata
- Apache
- Whatever
- leanhunter
- released 8/15/2018