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>vue-get-code 是一个非常灵活的获取短信验证码组件。
支持灵活的配置：
- 倒计时的秒数，默认 60 秒，可按需设置
- 发送验证码需要 ajax 调用接口，可以在 getCode() 函数中实现，过程由开发者实现，非常灵活，返回一个 Promise 对象即可，组件会等待函数，成功后会开始倒计时，失败了会结束倒计时。在此函数中，也可以做表单验证，真的非常灵活。
- 调用者可以控制组件是否禁用
- 发送验证码前、倒计时、禁用，多个状态都有对应 class，控制样式非常方便
- 可以定制发验证码之前的文字
- 可以定制倒计时的文案
- 倒计时有事件触发(countdownBegin/countdownUpdate/countdownEnd)
- 获取验证码接口报错有事件触发(getCodeError)
npm install vue-get-code
<template> <form> <input placeholder="phone" value="130xxxx" /> <vue-get-code :getCode="getCode" :interval="120"></vue-get-code> </form> </template> <script> export default { methods: { 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>vue-get-code 组件的 props 参数
// 发送验证码的 ajax 实现，函数请返回 Promise 对象 getCode: { required: true, type: Function }, // 倒计时的时长，单位：秒 interval: { default: 60, type: Number }, // 禁用，禁止点击 disable: { default: false, type: Boolean } vue-get-code 组件的 event 事件
countdownBegin countdownUpdate countdownEnd getCodeError <template> <form> <input placeholder="phone" value="130xxxx" /> <vue-get-code :getCode="getCode" :interval="3"> <template v-slot:default="child"> {{ child.data.count <= 0 ? '获取验证码' : '重新获取' }} </template> </vue-get-code> </form> </template> <script> export default { data() { return {} }, methods: { 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><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>工程基于 https://github.com/FEMessage/vue-sfc-cli 创建的。
简单使用示例：
# Install dependency yarn # Develop component yarn dev # Build yarn build # Ready to publish! # Or use `npm publish` yarn publish For those who are interested in contributing to this project, such as:
- report a bug
- request new feature
- fix a bug
- implement a new feature
Please refer to our contributing guide.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!