有15万开发者使用LeanCloud服务，其中不乏知乎、懂球帝、爱范儿、拉卡拉等知名应用，LeanCloud提供了数据存储、即时消息……等一站式服务，并从常用的用户管理需求出发，提供了邮箱验证、短信验证……等用户账户相关的服务。

为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务，LeanCloud推出了免费图形校验码服务，并且可以在应用设置中设置“强制短信验证服务使用图形校验码”。

Vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。

LeanCloud提供的由客户发起的短信发送场景主要有用户验证、用户密码重置，虽然不是很多场景，但如果每个场景下都单独进行图形校验码相关开发，则费时费力且对一些需要统一设置的参数调整不够灵活。

组件命名为Mobile，基于Element-UI的Form组件和Input组件进行开发，如果用户对布局和样式有特殊要求，只需要改为自己相应的组件，或者使用原生HTML元素并设置样式即可，同时需要将Element-UI提供的$message改为自己相应的API调用。

组件行为

开发的Mobile组件用于发送短信验证码，因此需要能够输入手机号码和图形校验码，并可触发发送短信的动作，触发发送短信动作成功后，需要禁用发送短信功能，并进行倒计时，倒计时结束后才能重新发送短信。

因此具体的组件行为主要是以下几点：

其中发送短信的行为必须调用不同场景下的API，因此我们需要将此按钮绑定的事件emit到父组件，由父组件决定具体调用哪个API。

组件props

从上述组件行为出发，分析需要传入组件的props：

组件的props选项如下：

props: {
 labelWidth: {
 type: String,
 default: '100px'
 },
 value: String,
 smsSent: Boolean
},

组件模板中，与props相关的考量主要有如下三方面：

组件的根元素是一个el-form组件，其label-width属性绑定到来自父组件的labelWidth属性， <el-form ref="mobile-form"> 。

手机号码输入框使用el-input组件，绑定到value属性，要实现双向绑定，不能直接使用v-model进行数据绑定，而是要将v-model绑定转换为v-bind:value属性绑定和@input事件绑定， <el-input :value="value" @input="value => $emit('input', value)"> ，这样就可以实现“v-model透传”。

（间接）发送短信按钮的禁用状态。发送短信按钮的禁用状态由倒计时的计数器组件data数据触发，当该数据不为0时，发送短信的按钮禁用。倒计时触发方式是通过父组件中绑定的smsSent属性，因此需要在子组件中watch该属性，并在该值为真是设置倒计时计数器，并通过setInterval进行倒计时。

图形校验码加载

为在组件加载时显示图形校验码，需要在组件的mounted生命周期钩子中调用LeanCloud的API。

在AV.Captcha.request()的回调中绑定校验码输入框、图形校验码元素以及发送短信按钮元素，绑定参数对象的三个属性均可以是表示元素id的string或实际HTMLElement，由于我们创建的是Vue组件，因此直接使用组件的$refs属性来指定实际HTMLElement，需要注意的是，el-input中input元素是ref的$el属性的children[0]，而el-button中button元素是ref的$el。

绑定函数还需要传入第二个参数，这是一个含有success和error方法的对象，用于提供图形校验码校验成功和失败的操作。

发送短信验证码

发送短信验证码在传递的第二个参数对象的success方法中进行，在这里，我们首先更新组件的smsSent属性为false，这样，当在父组件中实际完成短信发送之后设置smsSent为true时才会触发针对smsSent属性的watcher，同时，需要注意在父组件中绑定smsSent属性时，必须使用.sync修饰符。然后向父组件emit自定义sendSmsCode事件，并将success回调时的validateToken参数透传过去。

mounted () {
 this.$emit('update:smsSent', false)
 AV.Captcha.request().then((captcha) => {
 captcha.bind({
 textInput: this.$refs.captcha.$el.children[0],
 image: this.$refs.captchaImage,
 verifyButton: this.$refs.sendSms.$el
 }, {
 success: (validateToken) => {
 this.$emit('sendSmsCode', validateToken)
 },
 error: () => {
 this.$message.error('请输入正确的图形校验码！')
 }
 })
 })
}

组件使用

首先在父组件的组件选项中添加包含Mobile组件的components，然后在模板中添加mobile组件。

<mobile v-model="mobileForm.mobile"
 :sms-sent.sync="mobileForm.smsSent"
 @sendSmsCode="sendSms"></mobile>

其中绑定sendSmsCode事件的方法如下：

sendSms (validateToken) {
 this.sendSmsCode({
 mobile: this.mobileForm.mobile,
 validateToken
 }).then(() => {
 this.mobileForm.smsSent = true
 })
},

完整组件代码

<template>
 <el-form class="mobile-form"
 :label-width="labelWidth"
 ref="mobile-form">
 <el-form-item label="手机号码" prop="mobile">
 <el-input :value="value"
 @input="value => $emit('input', value)"
 :maxlength="11"
 type="tel">
 </el-input>
 </el-form-item>
 <el-form-item label="图形校验码">
 <el-input type="text" ref="captcha"></el-input>
 <img ref="captchaImage">
 </el-form-item>
 <el-form-item>
 <el-button type="info"
 ref="sendSms"
 :disabled="smsCodeCountingDown > 0 ||
 value.length !== 11">
 发送验证码
 </el-button>
 <span v-if="smsCodeCountingDown > 0">
 {{smsCodeCountingDown}} 秒后重新发送
 </span>
 </el-form-item>
 </el-form>
</template>
<script>
 import AV from 'leancloud-storage'
 export default {
 data () {
 return {
 smsCodeCountingDown: 0
 }
 },
 props: {
 labelWidth: {
 type: String,
 default: '100px'
 },
 value: String,
 smsSent: Boolean
 },
 watch: {
 smsSent (val) {
 if (val) {
 this.smsCodeCountingDown = 30
 let countingDownInterval = setInterval(() => {
 this.smsCodeCountingDown--
 if (this.smsCodeCountingDown === 0) {
 clearInterval(countingDownInterval)
 }
 }, 1000)
 }
 }
 },
 mounted () {
 AV.Captcha.request().then((captcha) => {
 captcha.bind({
 textInput: this.$refs.captcha.$el.children[0],
 image: this.$refs.captchaImage,
 verifyButton: this.$refs.sendSms.$el
 }, {
 success: (validateToken) => {
 this.$emit('update:smsSent', false)
leancloud this.$emit('sendSmsCode', validateToken)
 },
 error: () => {
 this.$message.error('请输入正确的图形校验码！')
 }
 })
 })
 }
 }
</script>
<style scoped>
 .sms-code-form {
 width: 360px;
 }
</style>

总结

以上所述是小编给大家介绍的Vue组件开发之LeanCloud带图形校验码的短信发送功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！