Input 文本输入 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

用于接受单行文本。

规则

支持通过键盘或者剪切板输入文本。
通过光标可以在水平方向进行移动。
对特定格式的文本进行处理，eg：隐藏密码。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

点击复制

import {OkInput} from '@21cnfe/vui'  
Vue.component('OkInput', OkInput)

代码演示

InputItem 文本输入 inputs

示例链接

示例源码

二维码

扫二维码查看演示效果

基本用法基本属性包括placeholder，align设置输入光标起点，maxLength 最大长度

点击复制

<ok-input placeholder="start from right" align="right" :maxLength="10">光标在右</ok-input>

带label标签 labelNumber 设置label宽度，align 设置输入光标起点

点击复制

<ok-input :labelNumber="4" placeholder="start from left" align="left">光标在左</ok-input>
<ok-input :labelNumber="4" placeholder="start from right" align="right">光标在右</ok-input>

输入类型 type 可选值为 password, number, text，默认text

点击复制

<ok-input type="number"></ok-input>
<ok-input type="password"></ok-input>
<ok-input type="text"></ok-input>

清除功能添加 clear 属性启用清除输入框内容功能

点击复制

<ok-input clear></ok-input>

不可用状态 editable / disabled 分别设置可编辑状态和禁用状态

点击复制

<ok-input editable></ok-input>
<ok-input disabled></ok-input>

验证样式 error 为错误状态样式，required 为必填项样式

点击复制

<ok-input placeholder="error" error>error</ok-input>
<ok-input placeholder="required" required>required</ok-input>

API

属性	说明	类型	默认值
`type`	输入框类型，可选值为 `password`, `number`, `text`	String	`text`
`v-model`	输入框值，支持双向绑定	String	`--`
`placeholder`	提示信息	String	`--`
`editable`	是否可以编辑	Boolean	`true`
`align`	输入框焦点起点位置（值范围：[‘left’, ‘right’]）	String	`left`
`disabled`	设置禁用	Boolean	`false`
`clear`	是否带清除功能	Boolean	`false`
`labelNumber`	标签文字个数，可选`2`,`3`,`4`,`5`,`6`,`7`	Number	`5`
`autoFocus`	是否自动获得焦点	Boolean	`false`
`maxLength`	最大长度	Number	`--`

Event

事件名称	说明	回调参数
`onBlur`	blur 事件触发的回调函数	`currentValue`当前值
`onFocus`	focus 事件触发的回调函数	`currentValue`当前值
`onChange`	change 事件触发的回调函数	`currentValue`当前值
`onInput`	input 事件触发的回调函数	`currentValue`当前值
`onClear`	clear 事件触发的回调函数	`--`
`onErrorClick`	点击报错 icon 触发的回调函数	`--`

1. Input 文本输入

Input 文本输入 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Event

Input 文本输入 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用