vue 嵌入倒计时组件（ 亲测可用 ）

由于花费了我不少时间才找到的组件，所以记录一下，后面方便自己好找一些，也算是分享出来给各位前端一起用。

 

npm 下载
npm install vue2-flip-countdown --save

 

template 部分

<div style="margin-top:20px;">

<flip-countdown :deadline="fileTime"></flip-countdown>

</div>

<script>
  import FlipCountdown from 'vue2-flip-countdown'
 
  export default {
      components: { 
            FlipCountdown 
        }，
data :{
　　

//倒计时时间

      fileTime :'',　　

endTime : '',

}
  },
methods:{

　　// 传分钟，将分钟转换成 天 小时 分,根据需求可用可不用, 这个组件要求的样式为： 202-05-17 14:30:20  

getTime1(time){
      this.endTime = ''


      //将分钟转换成 天 - 小时 - 分 
      var day1 = parseInt(time/60/24);
      var hour1 = parseInt(time/60%24);
      var min1 = parseInt(time % 60)




      var date = new Date()
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();




      day = day + day1
      hour = hour + hour1
      
      minute = minute + min1




      if(minute > 60 ){
        hour = hour + 1
        minute = minute - 60
      }




      if(hour > 24){
        day = day + 1
        hour = hour - 24
      }




      this.fileTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;      
    },

}

</script>

//找个地方 调用一下这个方法

this.getTime1( 传分钟 ) // 这个方法是我自写的，传进去分钟 转换成时间

 

 

deadline="2021-05-17 00:00:00" 是对比本地的时间，所以抄我代码可以，记得看一下自己本地的时间。 把时间替换成自己的时间上去。时间是重点。

 

　　这个是基于本地时间去对比的，所以不太适合用于 活动倒计时 几分钟几秒钟