写了一个非常简单的组件：vue-get-code。
vue-get-code 封装了发送验证码、倒计时，倒计时完成后可以重新发送……
欢迎使用，登录/注册都用得上啊。
使用很简单，支持灵活的配置，支持复杂的场景。 获取短信验证码、获取邮件验证码，都可以使用这个组件。
快速使用：
<template>
<form>
<input placeholder="phone" value="130xxxx" />
<vue-get-code :getCode="getCode"></vue-get-code>
</form>
</template>
<script>
import VueGetCode from 'vue-get-code'
export default {
components: {
VueGetCode
},
methods: {
// 调用获取验证码的接口，此函数请返回 Promise 对象
getCode() {
let mockApi = 'https://cdn.jsdelivr.net/npm/vue@2/package.json'
return fetch(mockApi)
}
}
}
</script>
<style>
.vue-get-code {
color: #1092ed;
cursor: pointer;
}
.vue-get-code.enable-countdown {
cursor: not-allowed;
}
</style>
Features 特点
vue-get-code 是一个非常灵活的获取短信验证码组件。
支持灵活的配置：
- 倒计时的秒数，默认 60 秒，可按需设置
- 发送验证码需要 ajax 调用接口，可以在 getCode() 函数中实现，过程由开发者实现，非常灵活，返回一个 Promise 对象即可，组件会等待函数，成功后会开始倒计时，失败了会结束倒计时。在此函数中，也可以做表单验证，真的非常灵活。
- 调用者可以控制组件是否禁用
- 发送验证码前、倒计时、禁用，多个状态都有对应 class，控制样式非常方便
- 可以定制发验证码之前的文字
- 可以定制倒计时的文案
- 倒计时有事件触发(countdownBegin/countdownUpdate/countdownEnd)
- 获取验证码接口报错有事件触发(getCodeError)
复杂场景：修改默认文字、修改倒计时文字、表单验证、event 事件
<template>
<form>
<input v-model="form.phone" placeholder="phone" />
<vue-get-code
:getCode="getCode"
:interval="5"
:disable="!form.phone"
@countdownBegin="log('begin', arguments)"
@countdownUpdate="log('update', arguments)"
@countdownEnd="log('end', arguments)"
>
<template v-slot:default
>获取验证码(输入手机后才能点击获取验证码)</template
>
<template v-slot:countdown="child">
请等待{{ child.data.interval - child.data.seconds }}秒
</template>
</vue-get-code>
</form>
</template>
<script>
export default {
data() {
return {
form: {
phone: ''
}
}
},
methods: {
getCode() {
if (this.form.phone.length < 7) {
alert('请填写正确的手机号码')
throw '请填写正确的手机号码' // 抛出错误，中断 Promise chain
}
let mockApi = 'https://cdn.jsdelivr.net/npm/vue@2/package.json'
return fetch(mockApi)
},
log() {
console.log(JSON.stringify(arguments))
}
}
}
</script>
<style>
.vue-get-code {
color: #1092ed;
cursor: pointer;
}
.vue-get-code.disable {
color: gray;
cursor: not-allowed;
}
.vue-get-code.enable-countdown {
cursor: not-allowed;
}
</style>
