InputItem

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

Import

import { InputItem } from  'mand-mobile-next'

Vue.createApp().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

PropsDescriptionTypeDefaultNote
typeinput type, special type has text formattingStringtexttext,bankCard,phone,
money,password
preview-typeinput preview typeString-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
namename of inputString-one of the event arguments, is used to distinguish multi inputs
v-modelvalue of inputString--
titletitle of inputString-slot left as alternative
solidthe width of title is fixed or notBooleantrue-
placeholderplaceholder of inputString--
briefdescriptionString--
maxlengthmaximum number of characters that can be enteredString/Number-the maxlength of phone type is fixed at 11
sizesize of inputStringnormallarge,normal
aligntext alignmentStringleftleft,center,right
errorerror messageString--
readonlyreadonlyBooleanfalse-
disableddisabledBooleanfalse-
is-title-latenthide title or notBooleanfalsetitle will be displayed when input is focused or content is not empty
is-highlightthe input is highlighted or notBooleanfalsehighlight focused item border
is-formativeif the input text is automatically formatted according to the typeBooleanthe default value is true when type is bankCard, phone or money, otherwise false-
is-amountthe input is financial figuresBooleanfalse-
formationinput text formatting callback functionFunction(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
clearableuse clear control or notBooleanfalse-
is-virtual-keyboarduse financial number keyboard controlBooleanfalse-
virtual-keyboard-disorderif number keys of financial number keyboard is out of orderBooleanfalse-
virtual-keyboard-ok-textconfirmation key texts of financial number keyboardStringconfirm-
virtual-keyboard-vmfinancial number keyboard ref nameString-generally used for custom number keyboard

InputItem Slots

left

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

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 WIP