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

叁歲伎倆 2023-10-03 19:52 42阅读 0赞

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

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