本期带来vue项目的获取验证码按钮以及一个定时任务
可以和我上期发的SpringBoot项目发现验证码一起配合使用
vue + elementUI项目使用
1、首先是前端的方法部分
send () { // 点击发送验证码
if (!this.rest) {
if (this.email === '') {
this.myMessage('error', '请输入邮箱')
} else {
this.count = TIME_COUNT
this.show = false
this.$axios.get('跨域请求地址').then(res => {
if (res.data.flag) {
this.myMessage('success', '获取成功')
} else {
this.myMessage('error', '发送失败请重试')
}
}).catch(err => {
console.log(err)
})
this.rest = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--
} else {
this.show = true
clearInterval(this.rest) // 清除定时器
this.rest = null
}
}, 1000)
}
}
},
myMessage (type, message) { // 弹窗提示
this.$message({
message: message,
type: type
})
}
2、data部分(用来给input设置默认值)
data () {
return {
email: '',
yzm: ''
}
}
2.1、script中加一个参数
const TIME_COUNT = 60 // 更改倒计时时间s
3、显示代码部分
按钮以及输入框
<el-input class="inputVa" v-model="email" placeholder="请输入登录邮箱"></el-input>
<el-input class="inputVa" style="width:160px" v-model="yzm" placeholder="请输入验证码"></el-input>
<el-button @click="send" type="success" :disabled="!show" style="width:140px">获取验证码
<span v-show="!show" style="font-size:5px" class="count">({{count}}s)</span></el-button>
有异常可以评论区讨论!!!!