基于vue2.0的活动倒计时组件countdown(附源码下载)
更新时间：2018年10月09日 08:39:06 作者：月光光
这是一款基于vue2.0的活动倒计时组件，可以使用服务端时间作为当前时间，在倒计时开始和结束时可以自定义回调函数。这篇文章主要介绍了基于vue2.0的活动倒计时组件countdown,需要的朋友可以参考下
这是一款基于vue2.0的活动倒计时组件，可以使用服务端时间作为当前时间，在倒计时开始和结束时可以自定义回调函数。
 |
安装
npm install vue2-countdown --save
使用组件
首先在模板部分添加：
<template> <div> <count-down v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDownE_cb(1)" :currentTime="1538983555" :startTime="1538983555" :endTime="1538983565" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分钟'" :secondsTxt="'秒'"> </count-down> </div> </template>
然后在js部分：
<script>
import CountDown from 'vue2-countdown'
export default {
components: {
CountDown
},
methods: {
countDownS_cb: function (x) {
console.log(x)
},
countDownE_cb: function (x) {
console.log(x)
}
}
}
</script>
选项
| 名称 | 默认值 | 描述 |
| currentTime | ( new Date() ).getTime() | 当前时间戳,如果不传,默认获取用户本地的时间(建议传服务器的当前时间) |
| startTime | 开始时间戳，必需 | |
| endTime | 结束时间戳，必需 | |
| tipText | 距离开始 | 开始倒计时之前的提示文字 |
| tipTextEnd | 距离结束 | 开始倒计时之后的提示文字 |
| endText | 已结束 | 倒计时结束之后的提示文字 |
| dayTxt | : | 自定义显示的天数文字 |
| hourTxt | : | 自定义显示的小时文字 |
| secondsTxt | : | 自定义显示的分钟文字 |
| secondsFixed | : | 自定义显示的秒数文字 |
回调函数
| 名称 | 默认值 | 描述 |
| start_callback | 开始倒计时结束之后的回调方法 | |
| end_callback | 活动倒计时结束之后的回调方法 |
总结
以上所述是小编给大家介绍的基于vue2.0的活动倒计时组件countdown(附源码下载)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
详解Vue3 Composition API中的提取和重用逻辑
这篇文章主要介绍了Vue3 Composition API中的提取和重用逻辑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了基于Vue实现Mysql数据库数据模糊查询,下面文章我们主要实现的是输入框中输入数据，根据输入的结果模糊搜索数据库对应内容，实现模糊查询，感兴趣的小伙伴可以进入文章我们一起学习2021-12-12
本篇文章主要介绍了Vue.js学习笔记之常用模板语法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
下面小编就为大家分享一篇解决Vue 通过下表修改数组,页面不渲染的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue中el-form标签中的自定义el-select下拉框标签功能
这篇文章主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
今天来说说权限管理，因为网上已经有很多关于这方面的很多内容，下面这篇文章主要给大家介绍了关于vue权限问题的完美解决方案，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要介绍了element中el-select的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue keepAlive缓存清除问题案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
本文主要介绍了在vue中如何使用高德地图实现轨迹显隐的功能,包括了相关代码的编写和具体实现步骤,对于想要在自己的项目中使用这一功能的开发者有一定的参考价值,希望大家对此有所帮助,同时也欢迎大家多多支持脚本之家2024-10-10
最新评论