vue实现获取验证码倒计时组件

最新推荐文章于 2024-06-25 12:02:02 发布

bentou_

最新推荐文章于 2024-06-25 12:02:02 发布

阅读量716

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/bentou_/article/details/105053879

版权

前端专栏收录该内容

24 篇文章 2 订阅

订阅专栏

vue实现获取验证码倒计时组件

1、效果图
在这里插入图片描述
2、html

<div class="code-input">
<!--验证码输入框-->
    <el-input
       placeholder="验证码"
       v-model="codeNumber"
       onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
       maxlength="5"
    >
    </el-input>
<!--验证码按钮-->
    <el-button type="primary" @click.native.prevent="SendCode" :disabled="disabled=!show">
       <span v-show="show">获取验证码</span>
       <span v-show="!show" class="count">{{count}} s</span>
    </el-button>
</div>

2、script

data () {   
    return {
      phone:this.isphone,
      show: true,  // 初始启用按钮
      count: '',   // 初始化次数
      timer: null,
      codeNumber: '',
      isSendCode: false
      }
},
methods: {
    SendCode () {
      this.isSendCode = true;
      const TIME_COUNT= 60;
      if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.show = true;
                    clearInterval(this.timer);  // 清除定时器
                    this.timer = null;
                  }
                }, 1000)
              };
    }
  },

3、css

div {
    display: table;
    text-align: left;
    margin-left: 15%;
    .el-input {
      display: table-cell;
      width: 50%;
    }
    input {
      width: 70%;
      margin: 0 auto;
      border-bottom: 1px solid #E4E4E4;
      border-top:0px;
      border-left:0px;
      border-right:0px;
    }
  }