vue2-countdown vue活动倒计时组件

2019年9月15日 329次阅读 来源: LaughingZhu

题目：基于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祝程序员们节日快乐，希望你们今天不像小编一样，在加班，呜呜~~(>_<)~~

    原文作者：LaughingZhu
    原文地址: https://segmentfault.com/a/1190000016794694
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞