vue2-countdown vue活动倒计时组件

发布时间:2019-05-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue2-countdown vue活动倒计时组件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

题目:基于vue2.x的活动倒计时组件

最近公司在写一个移动商城的项目,涉及到拼团的内容,于是就有了倒计时的需求。一时没有想法,就在gIThub找到了vue2-countdown,将该项目引入到了我公司的商城项目中,发现了一些问题,在github上看了一下,好像vue2-countdown夭折了,一年多没有跟新了,而且还存在一些问题:(,特写此文来记录一下使用及修改过程。

项目是用还是很简单

  1. Install

    npm install vue2-countdown --save

  • usage

    import CountDown From 'vue2-countdown'
    components: { CountDown },
    methods: {

     countDownS_cb: function (x) {
       console.LOG(x)
     },
     countDownE_cb: function (x) {
       console.log(x)
     }

    }

  • 列表项目

    <count-down

       v-on:start_callback="countDownS_cb(1)"
       v-on:end_callback="countDownE_cb(1)"
       :currentTime="1481450106"
       :startTime="1481450110"
       :endTime="1481450115"
       :tipText="'距离开始文字1'"
       :tipTextEnd="'距离结束文字1'"
       :endText="'结束自定义文字2'"
       :dayTxt="'天'"
       :hourTxt="'小时'"
       :minutestxt="'分钟'"
       :secondsTxt="'秒'">

    </count-down>

  • Options
    count-down里面的一些,上文步骤2中的参数,详情见上文链接。

vue2-countdown 项目存在的一些问题:

  • 无法自定义提示文字

    vue2-countdown vue活动倒计时组件


    作者在项目中注释掉了,导致我们在引入组建添加了此配置的话也无法显示提示语。
    解决方法:

       1.node_modules中找到安装的vue2-countdown文件,修改vue2-countdown->lib->vue2-countdown.vue文件,将注释消除。
       2.其实整个项目有用的只有lib/vue2-countdown.vue文件,所有也可以像小编将该文件内容复制一份到自己的项目,新建一个vue文件,作为组件,然后将组件的注释解除。
    
    
  • 倒计时逻辑问题
    引入后发现无论我们传什么时间过去,倒计时都是结束时间-开始时间重新计算,并非根据当前时间计算结束时间-当前时间的值,所以我们怎么配置,怎么刷新结果都是(end-start),其实好像都和当前时间没有关系(这个让小编头痛了好久,一直以为是自己哪里写错了,后来发现是作者自己的代码逻辑有点问题)
    解决方法

    vue2-countdown vue活动倒计时组件


    将原先的this.start改为this.current。作者原先虽然获取到了传入的当前时间戳,但在method中却没有使用。将start改为current可以保证输出的是当前时间距离结束时间的时间长度。

总结:虽然按上述方法解决我所急需的一些需求,但感觉vue2-countdown还有一些可以完善的地方,小编会在后续的文章中更新相关信息,并提供一个npm供大家下载。

1024祝程序员们节日快乐,希望你们今天不像小编一样,在加班,呜呜~~(>_<)~~

脚本宝典总结

以上是脚本宝典为你收集整理的vue2-countdown vue活动倒计时组件全部内容,希望文章能够帮你解决vue2-countdown vue活动倒计时组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。