Mand MobileInputItem
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
| Props | Description | Type | Default | Note |
|---|---|---|---|---|
| type | input type, special type has text formatting | String | text | text,bankCard,phone,money,password |
| preview-type | 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 | 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