sms-code-input

1.0.7 • Public • Published

SMS-CODE-INPUT

SMS code input component for Vue2

vue2 license npm

sms-code-input is a dependency-free, lightweight vue component that can be overwrited by yourself.

Usage

When you use it, you need to wrapper this component by an exact size container or element. (e.g: use div with definitely width)

step-1

vue create demo

step-2

cd demo
npm install sms-code-input

Example

npm run serve
<template>
  <div style="width: 300px">
    <sms-code-input 
      :digits="counts"
      :color="color"
      :styles="styles"
      @change="onInputChange" 
      @complete="onInputComplete"
    >
    </sms-code-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      counts: 4,
      color: '#409eff',
      styles: {
        height: '50px',
        width: '30px',
        fontSize: '20px',
        color: '#275edb'
      }
    }
  },
  methods: {
    onInputChange(val) {
      console.log('input change: --->', val)
    },
    onInputComplete(val) {
      console.log('input complete: --->', val)
    }
  }
}
</script>

Options

Property Description type default
digits the code numbers for the SMS Number 6
color the input border color String '#af3737'
styles the custom styles for the input Object {}

Functions

Function Name Description
change trigger when input code changed
complete tirgger when input code completed

Package Sidebar

Install

npm i sms-code-input

Weekly Downloads

0

Version

1.0.7

License

MIT

Unpacked Size

466 kB

Total Files

20

Last publish

Collaborators

  • mizhon