vue 实现获取验证码时间递减功能

最新推荐文章于 2024-10-16 16:31:17 发布

演员赵诗绎

最新推荐文章于 2024-10-16 16:31:17 发布

阅读量1.3k

点赞数

分类专栏： Vue 文章标签： vue 验证码时间递减功能

本文链接：https://blog.csdn.net/u013144287/article/details/80977879

版权

本文介绍如何在Vue项目中结合ElementUI组件实现获取验证码后的倒计时功能，重点讲解getValidate()和setTimeDown()两个关键方法。由于项目紧迫，详细解释略。

摘要由CSDN通过智能技术生成

vue 实现获取验证码时间递减功能

关于获取验证码时间递减的情况，最常用的是出现在注册界面，当我们点击获取验证码之后，然后时间通常为60s递减，那么vue是怎么实现的呢？首先看一下效果图。获取验证码接口就自己去琢磨了哈

vue如下：

<template>
<transition name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight">
  <div class="bg" v-loading="loading" :style="{backgroundImage:`url(${backImgUrl})`}">
    <div class="login">
      <div class="left">
        <div class="loginTitle">
          <h3>用户注册</h3>
        </div>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" style="margin-top: 40px;">
          <el-form-item prop="phone">
            <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" :maxlength="16" :minlength="6"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.repassword" placeholder="再次请输入密码" type="password" :maxlength="16" :minlength="6"></el-input>
          </el-form-item>
          <!-- <el-form-item class="modifyVerificat