SMS code input component for Vue2
sms-code-input is a dependency-free, lightweight vue component that can be overwrited by yourself.
When you use it, you need to wrapper this component by an exact size container or element. (e.g: use div with definitely width)
vue create demo
cd demo
npm install sms-code-input
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>| 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 | {} |
| Function Name | Description |
|---|---|
| change | trigger when input code changed |
| complete | tirgger when input code completed |