vux 60秒倒计时

60秒倒计时

<style lang="scss">
</style>

<template>
    <x-button :disabled="checkCode.disabled" @click.native="getCode">{{checkCode.text}}</x-button>
</template>

<script>
import { XButton } from "vux";
export default {
  name: "probation",
  components: { XButton },
  data() {
    return {
      checkCode: {
        text: "获取验证码",
        TIME: 6,
        disabled: false
      }
    };
  },
  methods: {
    //获取验证码按钮
    getCode() {
      this.checkCode.text = this.checkCode.TIME;
      this.checkCode.disabled = true;
      this.countDown();
    },
    //倒计时
    countDown() {
      console.log(this.checkCode.text);
      var _this = this;
      if (this.checkCode.text == 0) {
        this.checkCode.text = "获取验证码";
        this.checkCode.disabled = false;
        return false;
      }
      var time = setTimeout(function() {
        _this.checkCode.text--;
        _this.countDown();
      }, 1000);
    }
  }
};
</script>