https://cgygd.github.io/vue2-countdown/

好吧  我觉得用在列表里 不是特别好用，存在bug。又在网上发现了新的：

效果：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
  <div class="app-container">
    <div class="content">
      <div v-for="(item,index) in dataList">
        <el-card class="box-card">
          <p>{{item.id}}</p>
          <p>{{item.name}}</p>
          <p>{{item.date}}</p>
          <p>倒计时：{{item.dd}} 天 {{item.hh}}: {{item.mm}}: {{item.ss}}</p>
        </el-card>
      </div>
    </div>
 
  </div>
</template>
<script>
  import moment from 'moment'
 
  export default {
    data() {
      return {
        dataList: [{
            id: 1,
            name: '111',
            date: '2022-04-19 00:07:13'
          },
          {
            id: 2,
            name: '222',
            date: '2022-04-19 00:08:19'
          },
          {
            id: 3,
            name: '333',
            date: '2022-04-19 00:03:25'
          },
          {
            id: 4,
            name: '444',
            date: '2022-04-19 00:04:53'
          }
        ]
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        var myNewData = []
        this.dataList.map(((item, index) => {
          myNewData.push(item)
          this.$set(item, "ss", this.getTimeList())
        }))
        this.dataList = myNewData
      },
      getTimeList() {
        var _this = this;
        setInterval(function() {
          for (var key in _this.dataList) {
            var start = new Date().getTime();
            var end = Date.parse(moment(_this.dataList[key]["date"]).add(1, 'day'))
            var rightTime = end - start;
            if (rightTime > 0) {
              var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
              var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
              var mm = Math.floor((rightTime / 1000 / 60) % 60);
              var ss = Math.floor((rightTime / 1000) % 60);
              dd = dd > 9 ? dd : '0' + dd
              hh = hh > 9 ? hh : '0' + hh
              mm = mm > 9 ? mm : '0' + mm
              ss = ss > 9 ? ss : '0' + ss
              _this.dataList[key]["dd"] = dd;
              _this.dataList[key]["hh"] = hh;
              _this.dataList[key]["mm"] = mm;
              _this.dataList[key]["ss"] = ss;
            } else {
              _this.dataList[key]["dd"] = '00';
              _this.dataList[key]["hh"] = '00';
              _this.dataList[key]["mm"] = '00';
              _this.dataList[key]["ss"] = '00';
            }
          }
        }, 1000);
      },
    }
  }
</script>