题目:基于vue2.x的活动倒计时组件
最近公司在写一个移动商城的项目,涉及到拼团的内容,于是就有了倒计时的需求。一时没有想法,就在github上找到了vue2-countdown,将该项目引入到了我公司的商城项目中,发现了一些问题,在github上看了一下,好像vue2-countdown夭折了,一年多没有跟新了,而且还存在一些问题:(,特写此文来记录一下使用及修改过程。
项目是用还是很简单的
- 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 项目存在的一些问题:
-
无法自定义提示文字
作者在项目中注释掉了,导致我们在引入组建添加了此配置的话也无法显示提示语。
解决方法:1.在node_modules中找到安装的vue2-countdown文件,修改vue2-countdown->lib->vue2-countdown.vue文件,将注释消除。 2.其实整个项目有用的只有lib/vue2-countdown.vue文件,所有也可以像小编将该文件内容复制一份到自己的项目,新建一个vue文件,作为组件,然后将组件的注释解除。
- 倒计时逻辑问题
引入后发现无论我们传什么时间过去,倒计时都是结束时间-开始时间重新计算,并非根据当前时间计算结束时间-当前时间的值,所以我们怎么配置,怎么刷新结果都是(end-start),其实好像都和当前时间没有关系(这个让小编头痛了好久,一直以为是自己哪里写错了,后来发现是作者自己的代码逻辑有点问题)
解决方法:
将原先的this.start改为this.current。作者原先虽然获取到了传入的当前时间戳,但在method中却没有使用。将start改为current可以保证输出的是当前时间距离结束时间的时间长度。
总结:虽然按上述方法解决我所急需的一些需求,但感觉vue2-countdown还有一些可以完善的地方,小编会在后续的文章中更新相关信息,并提供一个npm供大家下载。
1024祝程序员们节日快乐,希望你们今天不像小编一样,在加班,呜呜~~(>_<)~~