阅读 6674

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

关注下面的标签,发现更多相似文章
评论