vue2-countdown vue活動倒計時組件

題目：基於vue2.x的活動倒計時組件

最近公司在寫一個移動商城的項目，涉及到拼團的內容，於是就有了倒計時的需求。一時沒有想法，就在github上找到了vue2-countdown,將該項目引入到了我公司的商城項目中，發現了一些問題，在github上看了一下，好像vue2-countdown夭折了，一年多沒有跟新了，而且還存在一些問題:(,特寫此文來記錄一下使用及修改過程。

項目是用還是很簡單的

1. Install

   npm install vue2-countdown --save

• Usage

  import CountDown from 'vue2-countdown'
  components: { CountDown },
  methods: {

   countDownS_cb: function (x) {
     console.log(x)
   },
   countDownE_cb: function (x) {
     console.log(x)
   }

  }

• 列表項目

  <count-down

     v-on:start_callback="countDownS_cb(1)"
     v-on:end_callback="countDownE_cb(1)"
     :currentTime="1481450106"
     :startTime="1481450110"
     :endTime="1481450115"
     :tipText="'距離開始文字1'"
     :tipTextEnd="'距離結束文字1'"
     :endText="'結束自定義文字2'"
     :dayTxt="'天'"
     :hourTxt="'小時'"
     :minutesTxt="'分鐘'"
     :secondsTxt="'秒'">

  </count-down>

• Options
  count-down裏面的一些，上文步驟2中的參數，詳情見上文鏈接。

vue2-countdown 項目存在的一些問題：

• 無法自定義提示文字
  
  作者在項目中註釋掉了，導致我們在引入組建添加了此配置的話也無法顯示提示語。
  解決方法：

     1.在node_modules中找到安裝的vue2-countdown文件，修改vue2-countdown->lib->vue2-countdown.vue文件，將註釋消除。
     2.其實整個項目有用的只有lib/vue2-countdown.vue文件，所有也可以像小編將該文件內容複製一份到自己的項目，新建一個vue文件，作爲組件，然後將組件的註釋解除。
  
  

• 倒計時邏輯問題
  引入後發現無論我們傳什麼時間過去，倒計時都是結束時間-開始時間重新計算，並非根據當前時間計算結束時間-當前時間的值，所以我們怎麼配置，怎麼刷新結果都是（end-start)，其實好像都和當前時間沒有關係（這個讓小編頭痛了好久，一直以爲是自己哪裏寫錯了，後來發現是作者自己的代碼邏輯有點問題）
  解決方法：
  
  將原先的this.start改爲this.current。作者原先雖然獲取到了傳入的當前時間戳，但在method中卻沒有使用。將start改爲current可以保證輸出的是當前時間距離結束時間的時間長度。

總結：雖然按上述方法解決我所急需的一些需求，但感覺vue2-countdown還有一些可以完善的地方，小編會在後續的文章中更新相關信息，並提供一個npm供大家下載。

1024祝程序員們節日快樂，希望你們今天不像小編一樣，在加班，嗚嗚~~(>_<)~~