CruxF/StudyVue

10.使用vue写一个简单的定时器

CruxF opened this issue · 0 comments

CruxF commented

很简单的一个需求,直接看下面代码即可明白

export default {
  name: 'Register',
  data () {
    return {
      codeTime: 10,
      codeContent: '发送验证码',
      codeClick: true
    };
  },
  methods: {
    // 获得手机验证码
    sendCode() {
      // 倒计时
      if (!this.codeClick) return
      this.codeClick = false
      this.codeContent = this.codeTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.codeTime--
        this.codeContent = this.codeTime + 's后重新发送'
        if (this.codeTime < 0) {
        window.clearInterval(clock)
        this.codeContent = '重新发送验证码'
        this.codeTime = 10
        this.codeClick = true
        }
      },1000)
      // 接口请求
      let datas = {
        mobile: this.mobile,
        prefixe: this.prefixe,
        captcha_data: this.captcha_data
      }
    }
  }
}