本文主要和大家介绍vue组件leancloud实现带图形校验码的短信发送功能，vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。本文在leancloud 短信轰炸与图形校验码官方文档 基础上，从封装需要出发开发一个简单的短信图形验证vue组件,具体内容详情大家参考下本文。
有15万开发者使用leancloud服务，其中不乏知乎、懂球帝、爱范儿、拉卡拉等知名应用，leancloud提供了数据存储、即时消息……等一站式服务，并从常用的用户管理需求出发，提供了邮箱验证、短信验证……等用户账户相关的服务。
为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务，leancloud推出了免费图形校验码服务，并且可以在应用设置中设置“强制短信验证服务使用图形校验码”。
vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。
leancloud提供的由客户发起的短信发送场景主要有用户验证、用户密码重置，虽然不是很多场景，但如果每个场景下都单独进行图形校验码相关开发，则费时费力且对一些需要统一设置的参数调整不够灵活。
组件命名为mobile，基于element-ui的form组件和input组件进行开发，如果用户对布局和样式有特殊要求，只需要改为自己相应的组件，或者使用原生html元素并设置样式即可，同时需要将element-ui提供的$message改为自己相应的api调用。
组件行为
开发的mobile组件用于发送短信验证码，因此需要能够输入手机号码和图形校验码，并可触发发送短信的动作，触发发送短信动作成功后，需要禁用发送短信功能，并进行倒计时，倒计时结束后才能重新发送短信。
因此具体的组件行为主要是以下几点：
提供一个输入手机号的输入框，该输入框内容可以由用户输入，也可以从用户信息中获取。
提供一个输入图形校验码的输入框。
页面加载完毕显示图形校验码。
提供一个发送短信的按钮，用户点击发送短信的按钮，校验图形校验码，若校验通过，使用手机号码，并以图形校验码校验返回的validataiontoken作为option参数发送短信。
短信发送成功，禁用发送短信的按钮，启动定时器进行倒计时，倒计时结束后恢复发送短信的按钮。
组件使用element-ui的form组件的布局，需要考虑el-form的labelwidth标签宽度设置与父组件中的el-form匹配。
其中发送短信的行为必须调用不同场景下的api，因此我们需要将此按钮绑定的事件emit到父组件，由父组件决定具体调用哪个api。
组件props
从上述组件行为出发，分析需要传入组件的props：
表示手机号码属性。我们发送短信验证码的目的是最终用于后续的验证或密码重置操作，可以从外部传入，并且能够在组件内部修改后返回父组件，因此该属性必须是双向绑定的，vue组件中双向绑定的属性有两种，一是自定义v-model，属性名必须是value，一是可以使用.sync修饰符绑定的属性，这里将手机号码属性设置为mobile组件的v-model属性，属性名为value。
通知mobile组件短信已发送的属性。属性名为smssent，类型为boolean，以禁用发送短信的按钮，并启动倒计时。
el-form的labelwidth属性。设置默认值，并接受来自父组件中传递的数据以保持与父组件中其他元素/组件布局一致。
组件的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>
相关推荐：
php生成sessionid和图片校验码的思路和实现
php身份证校验码计算方法_php实例
php校验码生成-备忘
以上就是vue组件leancloud实现带图形校验码的短信发送功能的详细内容。