vue+element-ui发送验证码倒数60秒重新发送，放在刷新，意外关闭窗口

发送请求时调用倒计时方法，倒计时60秒，同时将时间存到cookie中，写入后上一次存入的时间会被覆盖。当倒计时0时清除cookie中的数据，这就实现了我们的功能需求，

 <el-button v-if="showtime === null" @click="onSend(ruleForm)">获取验证码</el-button>
  <el-button class="hk-disabled" v-else disabled>{{showtime}}</el-button>

import cookie from '@/utils/store/cookie'
data () {
	return {
	     // 计时器,注意需要进行销毁
	     timeCounter: null,
	     // null 则显示按钮 秒数则显示读秒
	     showtime: null,
	     // 获取验证码的cookie
	     isCookie: null,
 	}
}

在js文件中封装set,remove方法用的时候调用就可以

function set (key, data, time) {
  if (!key) {
    return
  }
  let expires = 'Tue, 19 Jan 2038 03:14:07 GMT'
  if (time) {
    let date
    if (isType(time, 'Date')) {
      date = time
    } else {
      date = new Date()
      date.setTime(date.getTime() + time * 60000)
    }
    expires = date.toGMTString()
  }

  data = JSON.stringify(data)
  doc.cookie =
    escape(key) + '=' + escape(data) + '; expires=' + expires + '; path=/'
}

function remove (key) {
  if (!key || !_has(key)) {
    return
  }
  doc.cookie = escape(key) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'
}
export default {
  set,
  remove
}

在methods中

// 获取cookie中的时间
    getCookieTime () {
      let getCookieTime = cookie.get('codeTime')
      console.log(getCookieTime)
      if (getCookieTime !== null) {
        this.isCookie = getCookieTime
        this.codeTime = false
      } else {
        this.isCookie = null
      }
    },
// 倒计时显示处理
    countDownText (s) {
      this.showtime = `${s}s后重新获取`
    },
    // 倒计时 60秒 不需要很精准
    countDown (times) {
      const self = this
      // 时间间隔 1秒
      const interval = 1000
      let count = 0
      self.timeCounter = setTimeout(countDownStart, interval)
      function countDownStart () {
        if (self.timeCounter == null) {
          return false
        }
        count++
        // 存储codeTime到cookie中
        cookie.set('codeTime', times - count + 1)
        // 在codeTime中存储每次变化时间
        self.countDownText(times - count + 1)
        // console.log(this.showtime)
        if (count > times) {
          clearTimeout(self.timeCounter)
          cookie.remove('codeTime')
          self.showtime = null
        } else {
          cookie.set('codeTime', times - count + 1)
          self.timeCounter = setTimeout(countDownStart, interval)
        }
      }
    },
    onSend (ruleForm) {
      console.log(ruleForm)
      let that = this
      if (ruleForm.phone == '') {
        // console.log(this.)
        // that.$message.error('手机号不能为空！')
      } else {
        if (ruleForm.phone !== '') {
          var reg = /^1[3456789]\d{9}$/
          if (!reg.test(ruleForm.phone)) {
            // callback(new Error('请输入有效的手机号码'))
            // that.$message.error('请输入有效的手机号码')
          } else {
            // console.log('手机号')
            let type = 'login'
            registerVerify({phone: ruleForm.phone, type: type}).then(res => {
              that.countDown(60)
              if (res.status === 200) {
                console.log('验证码发送成功')
                this.$message({
                  message: res.msg,
                  type: 'success',
                  showClose: true,
                  duration: 3000
                })
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error',
                  showClose: true,
                  duration: 3000
                })
              }
            }).catch(res => {
              this.$message({
                message: res.msg,
                type: 'error',
                showClose: true,
                duration: 3000
              })
            })
          }
        }
      }
    },

监听

 watch: {
    isCookie: function () {
      if (this.isCookie !== null) {
        this.countDown(this.isCookie)
      }
    }
  }

太晚了，就不细改了，用的时候需要注意些哦
每天进步一点点