CodeInput

Introduction

import PressCodeInput from 'press-ui/press-code-input/press-code-input.vue';

export default {
   components: {
     PressCodeInput,
   }
}

Code Demo

Basic usage

<PressCodeInput
   v-model="value"
   @change="change"
   @finish="finish"
/>

export default {
   data() {
     return {
       value: ''
     }
   },
   methods: {
     change(value) {
       console.log('change', value);
     },
     finish() {
       console.log('finish');
     },
   },
}

model

Through mode, the mode can be set. The optional values are mode and line, and the default is mode.

<PressCodeInput
   v-model="value"
   mode="line"
/>

Custom length

With max-length, the length can be customized.

<PressCodeInput
   v-model="value"
   :max-length="4"
/>

Custom spacing

With space, the spacing can be customized.

<PressCodeInput
   v-model="value"
   :space="0"
/>

Thin border

Set hairline to true to display a thin border.

<PressCodeInput
   v-model="value"
   hairline
/>

Custom style

Through color, border-color, the style can be customized.

<PressCodeInput
   v-model="value"
   color="#f56c6c"
   border-color="#f56c6c"
/>

Hide input content

Set dot to true to hide the input content.

<PressCodeInput
   v-model="value"
   dot
/>

Automatically get focus

Set focus to true to automatically obtain focus.

<PressCodeInput
   v-model="value"
   focus
/>

API

Props

Parameters	Description	Type	Default value
adjust-position	Whether to automatically push the page up when the keyboard is popped up	boolean	true
max-length	Maximum input length	number	6
dot	Whether to fill with dots	boolean	false
mode	display mode, box - box mode, line - bottom horizontal line mode	string	box
hairline	Whether to have thin borders	boolean	false
space	distance between characters	number	10
value	preset value	string	-
focus	Whether to automatically obtain focus	boolean	false
bold	Whether the font is bold	boolean	false
color	font color	string	#606266
border-color	Border and line color	string	#c9cacc
font-size	font size	string | number	18
size	The size of the input box, width equals height	number	35
disabled-keyboard	Whether to hide the native keyboard and use a custom keyboard	boolean	false
disabled-dot	Whether to disable the input of . symbols	boolean	false

Events

Event name	Description	Parameters
change	Triggered when the input content changes	value
input	Triggered when the input content changes	value
finish	Triggered when the number of input characters reaches the maxlength value	value