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

混元霹靂手發表於2017-04-08
Vue元件

作者 混元霹靂手-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

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

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

如果轉載請標註出自@混元霹靂手ziksang

相關文章