vue element-ui实现获取短信验证码 ,60秒倒计时及页面

最新推荐文章于 2025-03-05 14:02:32 发布

高申航

最新推荐文章于 2025-03-05 14:02:32 发布

阅读量2.8k

点赞数 2

分类专栏：笔记文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/qq_46058838/article/details/129665887

版权

笔记专栏收录该内容

9 篇文章

订阅专栏

文章展示了如何在Vue.js应用中创建一个包含短信验证码输入框的表单项，并实现获取验证码按钮的倒计时功能。代码示例包括HTML结构、CSS样式以及JavaScript逻辑，使用了element-ui库和axios进行API请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cc废话不多说先上效果图

vue页面布局

  <el-form-item  prop="phoneCode" class="pr">
              <el-input placeholder="短信验证码"  v-model="form.phoneCode"></el-input>
              <button @click.prevent="getCode()"  class="code-btn" :disabled="!show">
                  <span v-show="show">获取验证码</span>
                  <span v-show="!show" class="count">{{count}} s</span>
              </button>
            </el-form-item>

css样式

/* 短信验证码css */
.pr {
position: relative;
}
.code-btn {
width: 100px;
height: 20px;
position: absolute;
top: 10px;
right: 5px;
z-index: 222;
color: #ef8466;
font-size: 14px;
border: none;
border-left: 1px solid #bababa;
padding-left: 10px;
background-color: #fff;
cursor: pointer;
}

逻辑js

// 获取短信验证码
    getCode() {
       //axios请求
      console.log(this.form.phone);
      // 验证码倒计时
      if (!this.timer) {
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }