ElementUI+VUE获取验证码前端代码

本期带来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>

有异常可以评论区讨论！！！！