sms-check-code
v1.0.5
Published
一个仿原生效果的短信验证码组件，vue2.6插件，无依赖。验证失败时动画加标红颜色显示，点击手机验证码平铺填充等
Downloads
15
Readme
sms-check-code
1,npm install sms-check-code --save
2,import VueSmsCode from 'sms-check-code'
3,vue.use(VueSmsCode)
<sms-check-code
title='请输入验证码'
:code-num='6'
:is-error='isError'
error-color='#D81A1A'
@finish='getSmsCode'
/>| 事件 | 说明 | 默认 | 类型 |:----: |:----: |:----: | :----: | title | 组件标题 | 请输入验证码 | string | code-num | 验证码个数 | 6 | number | is-error | 验证码是否错误 | false | boolean | error-color | 验证码错误时显示的错误颜色 | #D81A1A | string
| 方法 | 说明 | 默认 | 类型 |:----: |:----: |:----: | :----: | finish | 验证码值 | '' | string
<template>
<div id="app">
<sms-check-code
title='请输入验证码'
:codeNum='6'
:is-error='isError'
error-color='#D81A1A'
@finish='getSmsCode'
/>
{{msg}}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
isError: false, // 验证码错误
msg: ''
}
},
methods: {
getSmsCode(val) {
this.isError = false
this.msg = val
setTimeout(() => {
this.isError = val !== '888888';
if(val === '888888') {
this.msg = '验证码输入成功'
}
}, 1000)
}
}
}
</script>
<style>
html, body {
padding: 0;
margin: 0;
}
</style>