vue 一个页面多个短信验证倒计时方法

最新推荐文章于 2023-03-03 11:39:27 发布

桑谕

最新推荐文章于 2023-03-03 11:39:27 发布

阅读量404

点赞数

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/m0_49881056/article/details/122080930

版权

1. 创建form表单

<template>
<div class="phonebox1">
  <el-form :model="MailboxForm" :rules="Mailboxrules" ref="MailboxForm" class="demo-Form">
    <el-form-item prop="editcode" class="pr">
      <el-input v-model="MailboxForm.editcode" placeholder="请输入验证码"></el-input>
      <el-button :disabled="!countdownList[0].BtnStatus" @click="obtainmail1(0)" class="code-btn">
        {{ countdownList[0].BtnStatus ? "获取验证码" : `${countdownList[0].countDownTime}秒后重新获取` }}
      </el-button>
    </el-form-item>
    <el-form-item prop="codes" class="pr">
      <el-input v-model="MailboxForm.codes" placeholder="请输入验证码"></el-input>
      <el-button :disabled="!countdownList[1].BtnStatus" @click="obtainmail2(1)" class="code-btn">
        {{ countdownList[1].BtnStatus ? "获取验证码" : `${countdownList[1].countDownTime}秒后重新获取` }}
      </el-button>
    </el-form-item>
  </el-form>
   <span slot="footer" class="dialog-footer">
     <el-button type="primary" @click="deletMail" size="small">提 交</el-button>
   </span>
</div>
</template>

2. 初始化变量

 data () {
  return {
  MailboxForm: {
    editcode: "",
    codes: "",
  },
  Mailboxrules: {
    editcode: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
    codes: [{ required: true, message: "验证码不能为空", trigger: "blur" }]
  },
  countdownList: [
   {
    countDownTime: 60,//倒计时时间
    BtnStatus: true,//按钮的启用状态
    name: "oldmail"
   },
    {
    countDownTime: 60,//倒计时时间
    BtnStatus: true,//按钮的启用状态
    name: "newmail"
   }
  ],
 };
},

3. 获取localStorage保存的倒计时时间,初始化倒计时方法

created () {
    //初始化
    this.countdownList.forEach((item, index) => {
      let myEndTime = localStorage.getItem(item.name);
      myEndTime && this.codeCountDown(myEndTime, index);
    });
  },

4. 倒计时方法

 methods: {
     //倒计时方法
    codeCountDown (endMsRes, index) {
      this.countdownList[index].BtnStatus = false;//设置el-button 的禁用状态
      this.countdownList[index].countDownTime = Math.ceil((endMsRes - new Date().getTime()) / 1000); //剩余多少秒
      let time = setTimeout(() => {
        this.countdownList[index].countDownTime--;
        if (this.countdownList[index].countDownTime < 1) {
          this.countdownList[index].BtnStatus = true;
          this.countdownList[index].countDownTime = 60;
          localStorage.removeItem(this.countdownList[index].name);//清除localStorage
          clearTimeout(time);
        } else {
          this.codeCountDown(endMsRes, index);
        }
      }, 1000);
    },
      //点击事件
    obtainmail1 (index) {
        let endMsRes = new Date().getTime() + 60000; //当前时间戳加上一分钟的时间戳，相当于当前时间一分钟以后的时间戳
        localStorage.setItem("oldmail", JSON.stringify(endMsRes));//localStorage 设置倒计时时间
        this.codeCountDown(endMsRes, index);
    },
       //点击事件
    obtainmail2 (index) {
        let endMsRes = new Date().getTime() + 60000;
        localStorage.setItem("newmail", JSON.stringify(endMsRes));
        this.codeCountDown(endMsRes, index);
    },
    //提交表单清除localStorage保存的倒计时时间
    deletMail () {
        localStorage.removeItem("oldmail");
        localStorage.removeItem("newmail");
    }
 }

5. 样式

<style lang="less" scoped>
.phonebox1 {
  .pr {
    position: relative;
  }
  .code-btn {
    width: 130px;
    height: 34px;
    position: absolute;
    top: 3px;
    right: 5px;
    z-index: 222;
    color: #f5a623;
    font-size: 14px;
    border: none;
    border-left: 1px solid #bababa;
    padding-left: 16px;
    background-color: #fff;
    cursor: pointer;
  }
  .nextstep {
    width: 100%;
    height: 30px;
    background: red;
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>