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祝程序員們節日快樂，但願大家今天不像小編同樣，在加班，嗚嗚~~(>_<)~~