我這里用的是vant-ui 如果用其他UI的小伙伴請(qǐng)修改template中的按鈕結(jié)構(gòu)

<template>
  <div>
      <van-button slot="button" size="small" type="danger" v-show="show" @click="getCode">發(fā)送驗(yàn)證碼</van-button>
      <van-button slot="button" size="small" type="danger" v-show="!show" >{{count}} s</van-button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            show: true,
            count: '',
            timer: null
        }
    },
    methods:{
          getCode(){
             const TIME_COUNT = 60;
             if (!this.timer) {
               this.count = TIME_COUNT;
               this.show = false;
               this.timer = setInterval(() => {
                   if (this.count > 0 && this.count <= TIME_COUNT) {
                       this.count--;
                    } else {
                       this.show = true;
                       clearInterval(this.timer);
                       this.timer = null;
                    }
                 }, 1000)
              }
         } 
    }
}
</script>