mand-mobile/components/input-item/README.md

title	preview
InputItem 输入框	https://didi.github.io/mand-mobile/examples/#/input-item

单行文本输入框，支持特殊场景文本格式化

引入

import { InputItem } from 'mand-mobile'

Vue.component(InputItem.name, InputItem)

使用指南

input-item的表单校验可使用第三方工具，如vee-validate，使用示例可参考表单校验

代码演示

API

InputItem Props

属性	说明	类型	默认值	备注
type	表单类型，特殊类型自带文本格式化	String	text	text(文本),bankCard(银行卡号),phone(手机号), money(金额),digit(数字),password(密码), 以及其他的标准Html Input类型
preview-type 2.5.0+	表单预览类型	String	-	一般用于初始化时的特殊表单值（如带掩码的身份证号，手机号）预览，第一次触发编辑操作如点击退格键及其他字符键点击时，先清空预填值并将表单类型切换至type
name	表单名称	String	-	事件入参之一，可用于区分表单组件
v-model	表单值	String	-	-
title	表单左侧标题	String	-	可直接使用slot left代替
solid 2.2.1+	是否固定标题宽度，超出会自动换行	Boolean	true	-
placeholder	表单占位符	String	-	-
brief	表单描述	String	-	-
maxlength	表单最大字符数	String/Number	-	phone类型固定为11
size	表单尺寸	String	normal	large,normal
align	表单文本对齐方式	String	left	left,center,right
error	表单错误提示信息	String	-	新增抖动动效2.7.1+
readonly	表单是否只读	Boolean	false	-
disabled	表单是否禁用	Boolean	false	-
is-title-latent	表单标题是否隐藏	Boolean	false	表单获得焦点或内容不为空时展示
is-highlight	表单是否高亮	Boolean	false	表单获得焦点边框高亮
is-formative	表单文本是否根据类型自动格式化	Boolean	type为bankCard,phone, money默认为true，否则为false	-
is-amount	表单内容为金融数字	Boolean	false	-
formation	表单文本格式化回调方法	Function(name, curValue, curPos): {value: curValue, range: curPos}	-	传入参数name为表单名称，curValue为表单值，curPos为表单光标当前所在位置 返回参数value格式化值, range表单光标格式化后所在位置
clearable	表单是否使用清除控件	Boolean	false	-
is-virtual-keyboard	表单是否使用金融数字键盘控件	Boolean	false	支持粘贴2.7.1+
virtual-keyboard-disorder	金融数字键盘数字键乱序	Boolean	false	-
virtual-keyboard-ok-text	金融数字键盘确认键文案	String	确定	-
virtual-keyboard-vm	金融数字键盘ref名称	String	-	一般用于自定义键盘

InputItem Slots

left

左侧插槽，一般用于放置图标等

right

右侧插槽，一般用于放置图标等

brief

表单描述插槽，一般用于描述内容较复杂，用Props中brief无法满足的情况，需用v-if控制（不推荐）

error

表单错误插槽，一般用于错误内容较复杂，用Props中error无法满足的情况，需用v-if控制，参考示例中的错误提示（不推荐）

InputItem Methods

focus()

表单获得焦点

blur()

表单失去焦点

getValue()

获取表单值

InputItem Events

@focus(name)

表单获得焦点事件

@blur(name)

表单失去焦点事件

@change(name, value)

表单值变化事件

@confirm(name, value)

表单值确认事件， 仅使用金融数字键盘或组件在form元素内时有效

@keyup(name, event)

表单按键按下事件，仅is-virtual-keyboard为false时触发

@keydown(name, event)

表单按键释放事件，仅is-virtual-keyboard为false时触发

表单校验