Vue2.0進階組件篇4 突如其來（時間倒計時組件）

做者 混元霹靂手-Ziksang

接下來的時候我想關注於node.js等一系前端知識，可是這個時間倒計時組件真的很突如其來，就在昨天，由於公司需求，要作一個倒計時，ok那沒有問題，對於倒計時來講，一點都不難，確定你們都寫過，可是基於vue又是怎麼樣的原理，又如何去書寫，那就來把。不費話不，不BB，直接上代碼

接下來仍是按着咱們約定的來

2.代碼運行vue-cli 2.1版本

3.組件代碼都在components文件夾裏

4.主代碼邏輯都在 App.vue文件夾裏

我什麼都不要我只要

贊

components/zkTimeDown/zkTimeDown.vue

<template>
      <p>{{time}}</p>
</template>

<script>
   export default{
       data () {
           return {
               time : '',
               flag : false
           }

       },
       mounted () {
           let time = setInterval(()=>{
               if(this.flag == true){
                   clearInterval(time)
               }
               this.timeDown()
           },500)
       },
       props : {
           endTime : {
               type : String
           }
       },
       methods : {
           timeDown () {
               const endTime = new Date(this.endTime)
               const nowTime = new Date();
               let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
               let d = parseInt(leftTime/(24*60*60))
               let h = this.formate(parseInt(leftTime/(60*60)%24))
               let m = this.formate(parseInt(leftTime/60%60))
               let s = this.formate(parseInt(leftTime%60))
               if(leftTime <= 0){
                   this.flag = true
                   this.$emit('time-end')
               }
               this.time = `${d}天${h}小時${m}分${s}秒`
           },
           formate (time) {
               if(time>=10){
                   return time
               }else{
                   return `0${time}`
               }
           }
       }
   }
</script>複製代碼

這玩意真一眼就看明白了
1.props : 首先咱們要接收父組件一個數據props裏，咱們要接收的是一個結束時間
2.methods : formate咱們是對時間的時分秒進行了格式化
timeDown方法咱們對倒計時的寫法在，主要是把結束時間和當前時相減，而後再轉化面毫秒進行天·時·分·秒的計算，lefttime爲0的時候，咱們進行關閉定時器，再向外通知時間結束，觸發end-time事件

App.vue

<template>
     <div>
         <zk-time-down @time-end="message = '倒計時結束'" :endTime='endTime'></zk-time-down>
         <p>{{message}}</p> 
    </div>
</template>

<script>
import zkTimeDown from './components/zkTimeDown/zkTimeDown.vue'
export default {
    components : {
        zkTimeDown
    },
    data () {
        return {
            message : '正在倒計時',
            endTime : '2017-04-08 10:06:00'
        }
    }
}
</script>

<style>
</style>複製代碼

若是你們要試的話，請改變當前data裏endTime的時間，必定要大於當前時間，我省去了作驗證的一部分

咱們在組件上監聽倒計時時間，當倒計時時間結束的時候，觸發一個事件，基於這個倒計時，你們能夠充分的去想象一下別的更有趣倒計時的用法，和寫法，和一些根據本身的業務邏輯去自定義一些倒計時的邏輯。

這期分享的比較簡短，由於例子也不難，你們很容易消化，我所分享的也不是什麼高深的東西，都是實際工做中須要用到的東西，謝謝

渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899

支持我繼續創做和感到有收穫的話，請向我打賞點吧

若是轉載請標註出自@混元霹靂手ziksang