綁定日期道具到多個類

Question

我有一個倒計時組件和那個日期道具。我有多個類叫做定時器，在那裏我有我的方法，天，米等你明白了。我所擁有的是我的ProjectCountdown組件中的一個靜態日期。我希望能夠使用多個不同的日期，因此每個項目都有自己的倒計時。

下面是代碼

ProjectCountdown.vue

<template> 
    <grid :position="grid"> 
     <Countdown date="March 20, 2017 12:00"></Countdown> 
    </grid> 
    </template> 

    <script> 
    import Grid from './Grid'; 
    import Vue from 'vue'; 
    import Countdown from './Countdown'; 
    export default { 
     components: { 
     Countdown, Grid 
     }, 
     props: { 
     grid: { 
      type: String, 
     } 
     } 
    } 
    Vue.filter('two_digits', function (value) { 
     if (value.toString().length <= 1) { 
     return "0" + value.toString() 
     } 
     return value.toString(); 
    }); 
    </script> 

Countdown.vue

<template> 
    <div id="slideshow"> 
    <div class="timer"> 
    <div class="title-block"> 
     <p class="title">KNHB</p> 
     <p class="description">Sprint 1</p> 
    </div> 
    <div class="column"> 
     <div class="block"> 
      <p class="digit">{{ days | two_digits }}</p> 
      <p class="text">Days</p> 
     </div> 
     <div class="block"> 
      <p class="digit">{{ hours | two_digits }}</p> 
      <p class="text">Hours</p> 
     </div> 
     <div class="block"> 
      <p class="digit">{{ minutes | two_digits }}</p> 
      <p class="text">Minutes</p> 
     </div> 
    </div> 
    </div> 
    <div class="timer"> 
    <div class="title-block"> 
     <p class="title">MG de Jong</p> 
     <p class="description">Sprint 2</p> 
    </div> 
    <div class="column"> 
     <div class="block"> 
      <p class="digit">{{ days | two_digits }}</p> 
      <p class="text">Days</p> 
     </div> 
     <div class="block"> 
      <p class="digit">{{ hours | two_digits }}</p> 
      <p class="text">Hours</p> 
     </div> 
     <div class="block"> 
      <p class="digit">{{ minutes | two_digits }}</p> 
      <p class="text">Minutes</p> 
     </div> 
    </div> 
    </div> 
    <div class="timer"> 
    <div class="title-block"> 
     <p class="title">ITIP</p> 
     <p class="description">Sprint 3</p> 
    </div> 
    <div class="column"> 
     <div class="block"> 
      <p class="digit">{{ days | two_digits }}</p> 
      <p class="text">Days</p> 
     </div> 
     <div class="block"> 
      <p class="digit">{{ hours | two_digits }}</p> 
      <p class="text">Hours</p> 
     </div> 
     <div class="block"> 
      <p class="digit">{{ minutes | two_digits }}</p> 
      <p class="text">Minutes</p> 
     </div> 
    </div> 
    </div> 
    </div> 
    </template> 
    <script> 

    export default { 
    props: { 
     date: { 
      type: Number 
     }, 
    }, 
    data() { 
     return { 
      now: Math.trunc((new Date()).getTime()/1000) 
     } 
    }, 
    mounted() { 
     window.setInterval(() => { 
      this.now = Math.trunc((new Date()).getTime()/1000); 
     },1000);  
    }, 
    computed: { 
     seconds() { 
      return (this.modifiedDate - this.now) % 60; 
     }, 
     minutes() { 
      return Math.trunc((this.modifiedDate - this.now)/60) % 60; 
     }, 
     hours() { 
      return Math.trunc((this.modifiedDate - this.now)/60/60) % 24; 
     }, 
     days() { 
      return Math.trunc((this.modifiedDate - this.now)/60/60/24); 
     }, 
     modifiedDate: function() { 
     return Math.trunc(Date.parse(this.date)/1000) 
     } 
    }, 
    } 
    </script> 

Answer 1

https://github.com/niugm/countDown 我有寫一個演示，是你需要什麼？

Timer.vue

<template> 
    <div class="timer"> 
    <div class="title-block"> 
     <slot> 
     <!--slot--> 
     </slot> 
    </div> 
    <div class="column"> 
     <div class="block"> 
     <p class="digit">{{ days }}</p> 
     <p class="text">Days</p> 
     </div> 
     <div class="block"> 
     <p class="digit">{{ hours }}</p> 
     <p class="text">Hours</p> 
     </div> 
     <div class="block"> 
     <p class="digit">{{ minutes }}</p> 
     <p class="text">Minutes</p> 
     </div> 
     <div class="block"> 
     <p class="digit">{{ seconds }}</p> 
     <p class="text">Seconds</p> 
     </div> 
    </div> 
    </div> 
</template> 
<style> 
    .timer{ 
    background-color: #42b983; 
    padding: 20px; 
    margin: 20px; 
    } 
    .title-block{ 
    border: solid 1px #f2f2f2; 
    } 
    .title{ 
    font-size: 18px; 
    font-weight: 700; 
    } 
    .timer .column .block{ 
    display: inline-block; 
    margin: 0 10px; 
    background-color: #FFF; 
    padding: 10px; 
    } 
</style> 
<script> 
    export default { 
    props: { 
     date: { 
     type: String 
     } 
    }, 
    data() { 
     return { 
     now: 0, 
     count: 0 
     } 
    }, 
    methods: { 
     loop() { 
     this.count++ 
     this.now = Math.trunc(new Date().getTime()/1000) 
     console.log(this.now) 
     console.log(this.count) 
     this.count < 200 && setTimeout(this.loop, 1000) 
     } 
    }, 
    mounted() { 
     this.loop() 
    }, 
    computed: { 
     seconds() { 
     return (this.modifiedDate - this.now) % 60 
     }, 
     minutes() { 
     return Math.trunc((this.modifiedDate - this.now)/60) % 60 
     }, 
     hours() { 
     return Math.trunc((this.modifiedDate - this.now)/60/60) % 24 
     }, 
     days() { 
     return Math.trunc((this.modifiedDate - this.now)/60/60/24) 
     }, 
     modifiedDate: function() { 
     return Math.trunc(Date.parse(this.date)/1000) 
     } 
    } 
    } 
</script> 

CountDown.vue

<template> 
     <div id="slideshow"> 
     <Timer :date="date"> 
      <p class="title">KNHB</p> 
      <p class="description">Sprint 1</p> 
     </Timer> 
     <Timer :date="date"> 
      <p class="title">MG de Jong</p> 
      <p class="description">Sprint 2</p> 
     </Timer> 
     <Timer :date="date"> 
      <p class="title">ITIP</p> 
      <p class="description">Sprint 3</p> 
     </Timer> 
     </div> 
    </template> 
    <style> 
     .timer{ 
     background-color: #42b983; 
     padding: 20px; 
     margin: 20px; 
     } 
     .title-block{ 
     border: solid 1px #f2f2f2; 
     } 
     .title{ 
     font-size: 18px; 
     font-weight: 700; 
     } 
     .timer .column .block{ 
     display: inline-block; 
     margin: 0 10px; 
     background-color: #FFF; 
     padding: 10px; 
     } 
    </style> 
    <script> 
     import Timer from './Timer' 
     export default { 
     components: { 
      Timer 
     }, 
     props: { 
      date: { 
      type: String 
      } 
     }, 
     data() { 
      return { 
      now: Math.trunc((new Date()).getTime()/1000) 
      } 
     }, 
     mounted() { 
      window.setInterval(() => { 
      this.now = Math.trunc((new Date()).getTime()/1000) 
      }, 1000) 
     }, 
     computed: { 
      seconds() { 
      return (this.modifiedDate - this.now) % 60 
      }, 
      minutes() { 
      return Math.trunc((this.modifiedDate - this.now)/60) % 60 
      }, 
      hours() { 
      return Math.trunc((this.modifiedDate - this.now)/60/60) % 24 
      }, 
      days() { 
      return Math.trunc((this.modifiedDate - this.now)/60/60/24) 
      }, 
      modifiedDate: function() { 
      return Math.trunc(Date.parse(this.date)/1000) 
      } 
     } 
     } 
    </script> 

App.vue

<template> 
    <div id="app"> 
    <CountDown date="2017-03-20 12:00"></CountDown> 
    </div> 
</template> 

<script> 
import CountDown from './components/CountDown' 
export default { 
    name: 'app', 
    components: { 
    CountDown 
    } 
} 
</script> 

<style> 
#app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
} 
</style>