0.3.66 • Published 3 years ago

vue-codepin v0.3.66

Weekly downloads
50
License
-
Repository
-
Last release
3 years ago

vue-codeinput

Great pincode input component for Vue.js applications.

vue-codeinput

Demo on GitHub Pages

Features

  • configurable length (symbols count)
  • override-friendly styles
  • auto moving focus when filling
  • auto moving focus when deleting
  • auto selecting cell content on focusing
  • call for native numeric keyboard on mobiles
  • optional secure mode (password input type)
  • character preview on typing (configurable duration)

Attention!

Styles that component have are written just for demo. But that styles are override-friendly, so you can write any styles you want.

Usage

  npm i --save vue-codeinput

or with yarn

  yarn add vue-codeinput

Then in any component:

import PincodeInput from 'vue-codeinput';
// The name can be different depending on your desire
<div class="input-wrapper">
  <PincodeInput
        ref="fillingpincode"
        v-model="code"
        placeholder="-"
        :length="5"
        @fillcomplete="(val)=>{messsage=`now finished ${val}`}"
  />
</div>

Attention: you should use 'input.vue-codeinput' instead '.vue-codeinput' in order to rule specificity was higher

<style>
div.vue-codeinput-wrapper {
  // any styles you want for wrapper
}

input.vue-codeinput {
  // any styles you want for each cell
}
<style>

Props

  • length (symbols count)

    • type: Number
    • default: 4
  • autofocus (auto focus first cell)

    • type: Boolean
    • default: true
  • secure (password input type)

    • type: Boolean
    • default: false
  • characterPreview (preview character on typing)

    • type: Boolean
    • default: true
  • previewDuration (duration of character preview)

    • type: Number
    • default: 300

ToDo

  • configure husky
  • write unit tests for v0.2.0 (characterPreview and previewDuration props)
0.3.66

3 years ago

0.3.38

3 years ago

0.3.34

3 years ago

0.3.33

3 years ago

0.3.30

3 years ago

0.3.29

3 years ago

0.3.28

3 years ago

0.3.26

3 years ago

0.3.23

3 years ago

0.3.21

3 years ago

0.3.13

3 years ago

0.3.12

3 years ago