momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

<テンプレート>
    <div class="table-right flex-a-center">
        <div class="time-text">
            <span class="timeTextSpan" v-for="item,h のインデックス" >{{item}}</span>
            <span class="timeTextSpan1">: </span>
            <span class="timeTextSpan" v-for="item,m のインデックス" >{{item}}</span>
            <span class="timeTextSpan1">: </span>
            <span class="timeTextSpan" v-for="item,s のインデックス" >{{item}}</span>
        </div>
    </div>
</テンプレート>

<スクリプト>
'moment' から moment をインポートする
エクスポートデフォルト{
  小道具: {
    endTime: { }, //最終受信時刻 2021-12-17 16:29:20
  },
  データ（） {
    //ここにデータを保存します return {
      h:'00',
      m:'00',
      s:'00',
      タイマー:null
    };
  },
  時計：
    終了時間: {
      ハンドラ(e) {
        もし（e）{
          自分 = これ
          クリア間隔(this.timer)
          this.timer = setInterval(function(){self.init()},1000)
        }
      },
      深い：本当、
      即時: 真
    }
  },
  マウント() {
    自分 = これ
    自己初期化()
    クリア間隔(this.timer)
    this.timer = setInterval(function(){self.init()},1000)
  },
  //メソッドコレクションメソッド: {
    初期化(){
        time = moment(this.endTime).diff(moment()) とします。
        時間 <= 0 の場合
          クリア間隔(this.timer)
          this.onOver()
          戻る
        }
        t = 時間 / 1000 とします。
        let d = Math.floor(t / (24 * 3600)); // 残りの日数。必要に応じて補うことができます。let h = Math.floor((t - 24 * 3600 * d) / 3600) + d*24; // 日数は必要ありません。日数を時間に変換します。let _h = Math.floor((t - 24 * 3600 * d) / 3600) // 日数はそのままにして、時間数を取得します。let m = Math.floor((t - 24 * 3600 * d - _h * 3600) / 60);
        s = Math.floor((t - 24 * 3600 * d - _h * 3600 - m * 60));とします。
       
        this.h = 文字列(h).長さ == 1? '0'+文字列(h):文字列(h)
        this.m = 文字列(m).長さ == 1? '0'+文字列(m):文字列(m)
        this.s = 文字列.length == 1? '0'+文字列:文字列
    },
    onOver() {
      this.$emit('over') //カウントダウン終了時のコールバック}
 
  },
  beforeDestroy(){
    this.timer = null
    クリア間隔(this.timer)
  }
}
</スクリプト>
<style lang='less' スコープ>
@import url("@/assets/css/supplier.less");
 

  .table-right {
    フォントサイズ: 12px;
    色: #757e8a;
    .timeTextSpan{
      表示: インラインブロック;
      幅: 14px;
      高さ: 22px;
      テキスト配置: 中央;
      背景: #F1F0F0;
      境界線の半径: 2px;
      右マージン: 2px;
      フォントサイズ: 16px;
      色: #ff8a2b;
      フォントの太さ: 太字;
    }
    .timeTextSpan1{
      表示: インラインブロック;
      幅: 14px;
      テキスト配置: 中央;
      垂直方向の位置合わせ: 下;
      色:#202D40;
      フォントサイズ: 16px;
      フォントの太さ: 太字;
    }
   
    .time-text {
      左マージン: 10px;
    }
  }
</スタイル>