SMS-CODE-INPUT

SMS code input component for Vue2

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 |