vue使用ant组件完成点击获取验证码

原理很简单设置两个按钮用v-if判断是否展示 点击其中一个 把另一个变成false

直接上代码吧

<template>
  <div>
    <a-button @click="sendcode" v-if="issend">获取验证码</a-button>
    <a-button v-if="!issend" disabled type="primary">{{ count }}s后可再次发送</a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 30,
      issend: true
    };
  },
  methods: {
    sendcode() {
      const TIME_COUNT = 30;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.issend = false;
		//这里可以插入$axios调用后台接口
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.issend = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>