mand-mobile/components/input-item

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

Single-line text input, supports text formatting in exact scenarios

Import

import { InputItem } from 'mand-mobile'

Vue.component(InputItem.name, InputItem)

Instruction

Validation for input-item can use third-party tools, such asvee-validate. Examples can refer toValidation

Code Examples

API

InputItem Props

Props	Description	Type	Default	Note
type	input type, special type has text formatting	String	text	text,bankCard,phone, money,password
preview-type 2.5.0+	input preview type	String	-	generally used for initial input value (such as masked ID number with mobile phone number, mobile phone number) preview and the first time you trigger an edit operation, such as clicking the backspace key and other character key clicks, ** the pre-fill value will be cleared first and the input will be switched to type **
name	name of input	String	-	one of the event arguments, is used to distinguish multi inputs
v-model	value of input	String	-	-
title	title of input	String	-	slot left as alternative
solid 2.2.1+	the width of title is fixed or not	Boolean	true	-
placeholder	placeholder of input	String	-	-
brief	description	String	-	-
maxlength	maximum number of characters that can be entered	String/Number	-	the maxlength of phone type is fixed at 11
size	size of input	String	normal	large,normal
align	text alignment	String	left	left,center,right
error	error message	String	-	-
readonly	readonly	Boolean	false	-
disabled	disabled	Boolean	false	-
is-title-latent	hide title or not	Boolean	false	title will be displayed when input is focused or content is not empty
is-highlight	the input is highlighted or not	Boolean	false	highlight focused item border
is-formative	if the input text is automatically formatted according to the type	Boolean	the default value is true when type is bankCard, phone or money, otherwise false	-
is-amount	the input is financial figures	Boolean	false	-
formation	input text formatting callback function	Function(name, curValue, curPos): {value: curValue, range: curPos}	-	passing parameter name is the name of input, curValue is input value, curPos is the current position of input cursor, and returned value is formatted value. range is the position of input cursor after formatting
clearable	use clear control or not	Boolean	false	-
is-virtual-keyboard	use financial number keyboard control	Boolean	false	-
virtual-keyboard-disorder	if number keys of financial number keyboard is out of order	Boolean	false	-
virtual-keyboard-ok-text	confirmation key texts of financial number keyboard	String	confirm	-
virtual-keyboard-vm	financial number keyboard ref name	String	-	generally used for custom number keyboard

InputItem Slots

left

Left slot, generally is used to place icons, etc.

right

Right slot, generally is used to place icons, etc.

brief

Description slot，generally used to description is more complicated, can not be satisfied with brief in Props, need to use v-if control.(Not recommended)

error

Error slot，generally used to error is more complicated, can not be satisfied with error in Props, need to use v-if control, refer to the 'input with error message' in the example.(Not recommended)

InputItem Methods

focus()

Input gets focus

blur()

Input loses focus

getValue()

Get value of input

InputItem Events

@focus(name)

Input gets focus

@blur(name)

Input loses focus

@change(name, value)

Change the value of input

@confirm(name, value)

Input value confirmation, valid only when using a financial numeric keypad or component within a form element

@keyup(name, event)

key press, is invoked only if is-virtual-keyboard is false

@keydown(name, event)

key release, is invoked only if is-virtual-keyboard is false

Validation