vue+moment实现倒计时效果

vue+moment实现倒计时效果

示例

代码

npm install vue-moment

<template>
  <div>
    <h1>倒计时测试</h1>
    <h2 v-for="(item,index) in endDate" :key="index">
      距离 {{item}} 倒计时：{{countDown(item)}}
    </h2>
  </div>
</template>

<script>
import { Button } from 'element-ui';
import moment from 'moment'
import Vue from 'vue';
Vue.use(Button)

export default {
  name: "Test2",
  data() {
    return {
      now: moment(),
      endDate: ['2021-11-08 12:00:00','2021-11-08 13:30:30','2021-11-09 00:00:00'],
    }
  },
  methods:{
    PrefixInteger(num, n) {
      return (Array(n).join(0) + num).slice(-n);
    },
  },

  mounted() {
    //定时更新当前时间
    setInterval(()=>{
      this.now = moment()
    },1000);
  },
  computed: {
    //计算属性，返回剩余时间
    countDown(){
      return function(endDate) {
        let m1 = this.now
        let m2 = moment(endDate)
        let du = moment.duration(m2 - m1, 'ms'),
          h = du.get('hours'),
          m = du.get('minutes'),
          s = du.get('seconds');
        if(h<=0 && m<=0 && s<=0) {
          return "已超时"
        }else {
          return this.PrefixInteger(h,2) + ':' + this.PrefixInteger(m,2) + ':' + this.PrefixInteger(s,2)
        }
      }
    }
  },
}
</script>

<style>

</style>