vue2.0に基づくアクティビティカウントダウンコンポーネント

vue2-カウントダウン
vue2.0に基づくアクティビティカウントダウンコンポーネント
サーバーの現在の時刻を使用できます
カウントダウンが開始または終了するときに、コールバックをカスタマイズできます
ドキュメント：https：//cgygd.github.io/vue2-countdown/
デモ：https：//cgygd.github.io/vue2-countdown/example/index.html

Example.png

インストール

1.cnpm / asl

npm install vue2-countdown --save

2.Gitダウンロードソースコード

git clone https://github.com/cgygd/vue2-countdown

使用する

<count-down v-on:end_callback="countDownE_cb()"
                :currentTime="currentTime"
                :startTime="startTime"
                :endTime="endTime"
                :tipText="'距离订单开始还有'"
                :tipTextEnd="'距离订单关闭还剩'"
                :endText="'订单已关闭'"
                :dayTxt="'天'"
                :hourTxt="'小时'"
                :minutesTxt="'分钟'"
                :secondsTxt="'秒'">
</count-down>

import CountDown from 'vue2-countdown'
components: {
    CountDown
},
data() {
     return {
                currentTime:0,
                startTime:0,
                endTime:0,
            }
        },
methods: {
  countDownS_cb: function (x) {
    console.log(x)
  },
  countDownE_cb: function (x) {
    console.log(x)
  }
}

パラメータの説明

currentTime-現在のタイムスタンプ。渡されない場合、ユーザーの現地時間がデフォルトで取得されます（サーバーの現在の時刻を渡すことをお勧めします）

タイプ：番号

必須：false

デフォルト:(新しいDate（））。getTime（）
startTime-開始タイムスタンプ

タイプ：番号

必須：true
endTime-終了タイムスタンプ

タイプ：番号

必須：true
tipText-カウントダウンが始まる前のヒントテキスト

タイプ：文字列

必須：false

デフォルト：距離開始
tipTextEnd-カウントダウン開始後のヒントテキスト

タイプ：文字列

必須：false

デフォルト：距離の終わり
endText-カウントダウンが終了した後のプロンプトテキスト

タイプ：文字列

必須：false

デフォルト：終了
dayTxt-カスタム表示日のテキスト

タイプ：文字列

必須：false

デフォルト::
hourTxt-カスタム表示された時間テキスト

タイプ：文字列

必須：false

デフォルト::
secondsTxt-表示される分テキストをカスタマイズします

タイプ：文字列

必須：false

デフォルト::
secondsFixed-表示される秒のテキストをカスタマイズします

タイプ：文字列

必須：false

デフォルト::

コールバック方式

start_callback（）-開始カウントダウンが終了した後のコールバックメソッド

タイプ：機能

必須：false
end_callback（）-アクティビティのカウントダウンが終了した後のコールバックメソッド

タイプ：機能

必須：false

問題の修正

ただし、vue2-countdownプロジェクトのいくつかの問題が使用中に発見されました。

1.プロンプトテキストをカスタマイズできません

作成者がプロジェクトでコメントアウトしたため、この構成をインポートコンポーネントに追加すると、プロンプトが表示されませんでした。
解決策：
1。node_modulesでインストールされているvue2-countdownファイルを見つけ、vue2-countdown.vueファイルを変更して、コメントを削除します。

Comment.png

Uncomment.png

2.実際、プロジェクト全体で役立つのはlib / vue2-countdown.vueファイルのみです。このファイルのコンテンツを独自のプロジェクトにコピーし、コンポーネントとして新しいvueファイルを作成してから、コンポーネントのコメントを解除することもできます。。

2.カウントダウンロジックの問題

導入後、カウントダウンは終了時刻であることがわかります-終了時刻を計算するのではなく、開始時刻が再計算されます-現在の時刻に基づいて現在の時刻の値が設定され、結果を更新すると（終了-開始）実際には、現在の時刻とは何の関係もないようです

解決策：元のthis.startをthis.currentに変更します。作成者は最初に渡された現在のタイムスタンプを取得しましたが、メソッドでは使用しませんでした。開始を現在に変更すると、出力が現在の時刻と終了時刻の間の時間の長さになるようにすることができます。