短信验证码60倒计时

export default {data () {return {btnColor: '#ea5504',content: '发送验证码', // 按钮里显示的内容totalTime: 90, // 记录具体倒计时间 stypeBtn: 'warning',sendBtnDisabled: false, // 发送短信按钮状态captchaId: '', // 图形验证码验证idverifyFlag: false,imgCode: '',active: 0,activeType: '',formData: {userName: '',telephone: '',SMSVerCode: '',VerifyCode: ''},nameType: false,phoneType: false,phoneLicit: false,codeType: false,codeVerifyType: false}},directives: {fours: {inserted (el, bindings, vnode) { // 指令元素插入到页面时执行el.changeValue = function (e) {if (el.value.trim()) {switch (bindings.value) {case 'name':vnode.context['nameType'] = falsebreakcase 'phone':vnode.context['phoneType'] = falsevnode.context['phoneLicit'] = !/^1\d{10}$/.test(el.value.trim())breakcase 'code' :vnode.context['codeType'] = falsebreakcase 'codeVerify' :vnode.context['codeVerifyType'] = falsebreak}} else {vnode.context[`${bindings.value}Type`] = true}}el.onblur = function () {el.changeValue()}el.onfocus = function () {// 对比名称一样加边框颜色vnode.context['activeType'] = bindings.value}el.oninput = el.changeValue}}},methods: {// 计算class类名classObject (value) {return {active: this.activeType === value,bdColor: value === 'phone' && (this.phoneLicit || this[`${value}Type`])}},// 清除数据reset (value) {this.formData[value] = ''},// 发送验证码async sendCode () {let res = await getReportCode({captchaId: this.captchaId,captchaValue: this.formData.VerifyCode,clientId: 'h5',clientName: 'h5_mobile',mobile: this.formData.telephone})if (res.code === '30000') {this.verifyFlag = truethis.createVerifyVode()}if (res.code === '30001') {this.$notify({message: res.message,color: '#ff9f0a',background: '#fff8ea'})this.createVerifyVode()}if (res.code === 1) {this.sendBtnDisabled = truethis.typeBtn = 'info'this.btnColor = '#d9d9d9'this.content = this.totalTime + 's后重新获取'let timer = setInterval(() => {this.totalTime--this.content = this.totalTime + 's后重新获取'if (this.totalTime < 0) {clearInterval(timer)this.content = '发送验证码'this.totalTime = 90this.sendBtnDisabled = falsethis.typeBtn = 'warning'this.btnColor = '#ea5504'}}, 1000)}

短信验证码60倒计时相关推荐

vue页面实现短信验证码60秒倒计时
废话不多说,直接上代码. template <div class='single-wrapper fs14'><div class='single-mb'>短信验证</d ...
java短信验证码 60秒_Rxjava操作符飙车系列（三）验证码倒计时
现在很多软件都需要获取短信验证码,通常都是60秒在向服务器发送一次请求.那么如果用Rxjava来实现这个倒计时的功能呢? 用到的操作符如下: 1.interval: interval 创建一个按照给定 ...
使用Jquery实现获取短信验证码60秒倒计时
现在使用手机号+验证码的方式注册账号已经成为一种必备功能,当我们输入手机号点击发送验证码按钮后,按钮应该不可被再次点击,并开始倒计时,倒计时结束后才能再次点击.这一个可以借助某些插件实现,但其实使用J ...
vue element-ui实现获取短信验证码 ,60秒倒计时及页面
cc废话不多说先上效果图 vue页面布局 <el-form-item prop="phoneCode" class="pr"><el-inp ...
短信验证码60秒倒计时
html 区域 <el-button :disabled="isClick" @click="doNotRepeatOperation">{{tim ...
android自定义秒表,Android自定义Chronometer实现短信验证码秒表倒计时功能
本文实例为大家分享了Chronometer实现倒计时功能,Android提供了实现按照秒计时的API,供大家参考,具体内容如下一.自定义ChronometerView 继续自TextView 主要原 ...
java发送短信验证码带倒计时
分享一个完整的java发送短信验证码的完整实例,这是一个官方的使用demo,带有60秒倒计时功能. 效果: 我使用的是榛子云短信平台 , 官网地址:http://sms_developer.zhenz ...
android 短信验证计时,Android自定义Chronometer实现短信验证码秒表倒计时功能
本文实例为大家分享了chronometer实现倒计时功能,android提供了实现按照秒计时的api,供大家参考,具体内容如下一.自定义chronometerview 继续自textview 主要原 ...
axure 倒计时_Axure教程：短信验证码实现倒计时
编辑导读:本文跟大家分享,如何用Axure实现短信验证码倒计时效果,作者从预览图,到所需基本原件,再到操作步骤都一一展开了分析,并对过程中需要注意的问题进行了介绍,希望对你有所启发. 这个是新用户注册 ...

短信验证码60倒计时

短信验证码60倒计时相关推荐

最新文章

热门文章