Vue2.0进阶组件篇4 突如其来（时间倒计时组件）

作者 混元霹雳手-Ziksang

接下来的时候我想关注于node.js等一系前端知识，但是这个时间倒计时组件真的很突如其来，就在昨天，因为公司需求，要做一个倒计时，ok那没有问题，对于倒计时来说，一点都不难，肯定大家都写过，但是基于vue又是怎么样的原理，又如何去书写，那就来把。不费话不，不BB，直接上代码

接下来还是按着我们约定的来

2.代码运行vue-cli 2.1版本

3.组件代码都在components文件夹里

4.主代码逻辑都在 App.vue文件夹里

我什么都不要我只要

赞

components/zkTimeDown/zkTimeDown.vue

<template>
      <p>{{time}}</p>
</template>

<script>
   export default{
       data () {
           return {
               time : '',
               flag : false
           }

       },
       mounted () {
           let time = setInterval(()=>{
               if(this.flag == true){
                   clearInterval(time)
               }
               this.timeDown()
           },500)
       },
       props : {
           endTime : {
               type : String
           }
       },
       methods : {
           timeDown () {
               const endTime = new Date(this.endTime)
               const nowTime = new Date();
               let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
               let d = parseInt(leftTime/(24*60*60))
               let h = this.formate(parseInt(leftTime/(60*60)%24))
               let m = this.formate(parseInt(leftTime/60%60))
               let s = this.formate(parseInt(leftTime%60))
               if(leftTime <= 0){
                   this.flag = true
                   this.$emit('time-end')
               }
               this.time = `${d}天${h}小时${m}分${s}秒`
           },
           formate (time) {
               if(time>=10){
                   return time
               }else{
                   return `0${time}`
               }
           }
       }
   }
</script>复制代码

这玩意真一眼就看明白了
1.props : 首先我们要接收父组件一个数据props里，我们要接收的是一个结束时间
2.methods : formate我们是对时间的时分秒进行了格式化
timeDown方法我们对倒计时的写法在，主要是把结束时间和当前时相减，然后再转化面毫秒进行天·时·分·秒的计算，lefttime为0的时候，我们进行关闭定时器，再向外通知时间结束，触发end-time事件

App.vue

<template>
     <div>
         <zk-time-down @time-end="message = '倒计时结束'" :endTime='endTime'></zk-time-down>
         <p>{{message}}</p> 
    </div>
</template>

<script>
import zkTimeDown from './components/zkTimeDown/zkTimeDown.vue'
export default {
    components : {
        zkTimeDown
    },
    data () {
        return {
            message : '正在倒计时',
            endTime : '2017-04-08 10:06:00'
        }
    }
}
</script>

<style>
</style>复制代码

如果大家要试的话，请改变当前data里endTime的时间，一定要大于当前时间，我省去了做验证的一部分

我们在组件上监听倒计时时间，当倒计时时间结束的时候，触发一个事件，基于这个倒计时，大家可以充分的去想象一下别的更有趣倒计时的用法，和写法，和一些根据自己的业务逻辑去自定义一些倒计时的逻辑。

这期分享的比较简短，因为例子也不难，大家很容易消化，我所分享的也不是什么高深的东西，都是实际工作中需要用到的东西，谢谢

渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学， 微信 zzx1994428 QQ494755899

支持我继续创作和感到有收获的话，请向我打赏点吧

如果转载请标注出自@混元霹雳手ziksang