vue +element 实现倒计时，以及倒计时结束时启动计时器计时，最后用的vant 组件

<!--<template>
              <el-col :span="10" class="getCode">
                <el-button
                  :disabled="isDisabled"
                  :class="isDisabled?'lightBrown opacity':'deepBrown'"
                  @click="getCode"
                >{{buttonName}}</el-button>
              </el-col>
</template>
 
<script>
	export default {
  data() {
    return {
     isDisabled: false,
     buttonName:"",
     second:60
    }
  },
  methods: {
  	getCode(){
  	            let that = this;
  	            that.isDisabled = true;
  	            let interval = window.setInterval(function() {
  	              that.buttonName = "(" + that.second + "秒)后重新发送";
  	              --that.second;
	              if (that.second < 0) {
	                that.buttonName = "重新发送";
	                that.second = 60;
	                that.isDisabled = false;
	                window.clearInterval(interval);
	              }
  	            }, 1000);
  	}
  }
}
</script>-->
	<template>
    <span>{{hour? hourString+'小时'+minuteString+'小时'+secondString+'秒' : minuteString+'分'+secondString+'秒'}}</span>
</template>

<script>
  export default {
    data () {
      return {
        hour: '',
        minute: '',
        second: '',
        promiseTimer: ''
      }
    },
    props: {
      remainTime: {    // 倒计时间总秒数
        default: '2'
      }
    },
    mounted () {
      if (this.remainTime > 0) {
        this.hour = Math.floor((this.remainTime / 3600) % 24)
        this.minute = Math.floor((this.remainTime / 60) % 60)
        this.second = Math.floor(this.remainTime % 60)
        this.countDowm()
      }
    },
    methods: {
      countDowm () {
        var self = this
        clearInterval(this.promiseTimer)
        this.promiseTimer = setInterval(function () {
          if (self.hour === 0) {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.second = 0
              self.$emit('countDowmEnd', true)
              clearInterval(self.promiseTimer)
            } else {
              self.second -= 1
            }
          } else {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.hour -= 1
              self.minute = 59
              self.second = 59
            } else {
              self.second -= 1
            }
          }
        }, 1000)
      },
      formatNum (num) {
        return num < 10 ? '0' + num : '' + num
      }
    },
    computed: {
      hourString () {
        return this.formatNum(this.hour)
      },
      minuteString () {
        return this.formatNum(this.minute)
      },
      secondString () {
        return this.formatNum(this.second)
      }
    }
  }
</script>

 

 

2.当倒计时计时器事件为0时，启动计时器，

<!--<template>
              <el-col :span="10" class="getCode">
                <el-button
                  :disabled="isDisabled"
                  :class="isDisabled?'lightBrown opacity':'deepBrown'"
                  @click="getCode"
                >{{buttonName}}</el-button>
              </el-col>
</template>
 
<script>
	export default {
  data() {
    return {
     isDisabled: false,
     buttonName:"",
     second:60
    }
  },
  methods: {
  	getCode(){
  	            let that = this;
  	            that.isDisabled = true;
  	            let interval = window.setInterval(function() {
  	              that.buttonName = "(" + that.second + "秒)后重新发送";
  	              --that.second;
	              if (that.second < 0) {
	                that.buttonName = "重新发送";
	                that.second = 60;
	                that.isDisabled = false;
	                window.clearInterval(interval);
	              }
  	            }, 1000);
  	}
  }
}
</script>-->
	<template>
		<div>
    <span>{{hour? hourString+'小时'+minuteString+'小时'+secondString+'秒' : minuteString+'分'+secondString+'秒'}}</span>
    <!--计时器-->
      <h4 id=mytime>{{str}}</h4>
        </div>
</template>

<script>
  export default {
    data () {
      return {
      	/*计时器*/
      	h:0,//定义时，分，秒，毫秒并初始化为0；
        m:0,
        s:0,
        ms:0,
        time:0, //定时器
        str:'00:00:00',
        times:'', //统计共多少秒时间
        
        
        
        hour: '',
        minute: '',
        second: '',
        promiseTimer: ''
      }
    },
    props: {
      remainTime: {    // 倒计时间总秒数
        default: '2'
      }
    },
    mounted () {
      if (this.remainTime > 0) {
        this.hour = Math.floor((this.remainTime / 3600) % 24)
        this.minute = Math.floor((this.remainTime / 60) % 60)
        this.second = Math.floor(this.remainTime % 60)
        this.countDowm()
      }
    },
    methods: {
    	/*计时器*/
      start(){  //开始
        this.time=setInterval(this.timer,50);
      },
      timer(){                //定义计时函数
        this.ms=this.ms+50;        //毫秒
        if(this.ms>=1000){
          this.ms=0;
          this.s=this.s+1;        //秒
        }
        if(this.s>=60){
          this.s=0;
          this.m=this.m+1;       //分钟
        }
        if(this.m>=60){
          this.m=0;
          this.h=this.h+1;        //小时
        }
        this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s);
        //统计共看了多少秒
        this.times=this.s + this.m*60 + this.h*3600 ;
        console.log(this.times)
      },
      toDub(n){  //补0操作
        if(n<10){
          return "0"+n;
        }
        else {
          return ""+n;
        }
      },
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
      countDowm () {
        var self = this
        clearInterval(this.promiseTimer)
        this.promiseTimer = setInterval(function () {
          if (self.hour === 0) {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.second = 0
              self.$emit('countDowmEnd', true)
              clearInterval(self.promiseTimer)
              self.start()
            } else {
              self.second -= 1
            }
          } else {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.hour -= 1
              self.minute = 59
              self.second = 59
            } else {
              self.second -= 1
            }
          }
        }, 1000)
      },
      formatNum (num) {
        return num < 10 ? '0' + num : '' + num
      }
    },
    computed: {
      hourString () {
        return this.formatNum(this.hour)
      },
      minuteString () {
        return this.formatNum(this.minute)
      },
      secondString () {
        return this.formatNum(this.second)
      }
    }
  }
</script>