脚本宝典收集整理的这篇文章主要介绍了vue2-countdown vue活动倒计时组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
题目:基于vue2.x的活动倒计时组件
最近公司在写一个移动商城的项目,涉及到拼团的内容,于是就有了倒计时的需求。一时没有想法,就在gIThub上找到了vue2-countdown,将该项目引入到了我公司的商城项目中,发现了一些问题,在github上看了一下,好像vue2-countdown夭折了,一年多没有跟新了,而且还存在一些问题:(,特写此文来记录一下使用及修改过程。
项目是用还是很简单的
npm install vue2-countdown --save
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>
vue2-countdown 项目存在的一些问题:
无法自定义提示文字
作者在项目中注释掉了,导致我们在引入组建添加了此配置的话也无法显示提示语。
解决方法:
1.在node_modules中找到安装的vue2-countdown文件,修改vue2-countdown->lib->vue2-countdown.vue文件,将注释消除。
2.其实整个项目有用的只有lib/vue2-countdown.vue文件,所有也可以像小编将该文件内容复制一份到自己的项目,新建一个vue文件,作为组件,然后将组件的注释解除。
总结:虽然按上述方法解决我所急需的一些需求,但感觉vue2-countdown还有一些可以完善的地方,小编会在后续的文章中更新相关信息,并提供一个npm供大家下载。
1024祝程序员们节日快乐,希望你们今天不像小编一样,在加班,呜呜~~(>_<)~~
以上是脚本宝典为你收集整理的vue2-countdown vue活动倒计时组件全部内容,希望文章能够帮你解决vue2-countdown vue活动倒计时组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。