vue 活动倒计时组件

1. 这是倒计时封装好的组件这里我们命名 countdown.vue

<template><div><p v-if="msTime.show"><span v-if="tipShow" class="no-bg">{{tipText}}：</span><span v-if="!tipShow" class="no-bg">{{tipTextEnd}}：</span><span v-if="msTime.day>0" class="no-bg"><span>{{msTime.day}}</span><i>{{dayTxt}}</i></span><span>{{msTime.hour}}</span><i>{{hourTxt}}</i><span>{{msTime.minutes}}</span><i>{{minutesTxt}}</i><span>{{msTime.seconds}}</span><i>{{secondsTxt}}</i></p><p v-if="!msTime.show">{{endText}}</p></div>
</template>
<script>
export default {replace: true,data() {return {tipShow: true,msTime: {//倒计时数值show: false, //倒计时状态day: "", //天hour: "", //小时minutes: "", //分钟seconds: "" //秒},star: "", //活动开始时间end: "", //活动结束时间current: "" //当前时间};},watch: {currentTime: function(val, oldval) {this.gogogo();}},props: {//距离开始提示文字tipText: {type: String,default: "距离开始"},//距离结束提示文字tipTextEnd: {type: String,default: "距离结束"},//时间控件IDid: {type: String,default: "1"},//当前时间currentTime: {type: Number},// 活动开始时间startTime: {type: Number},// 活动结束时间endTime: {type: Number},// 倒计时结束显示文本endText: {type: String,default: "已结束"},//自定义显示文字:天dayTxt: {type: String,default: ":"},//自定义显示文字:时hourTxt: {type: String,default: ":"},//自定义显示文字:分minutesTxt: {type: String,default: ":"},secondsTxt: {type: String,default: ":"},//是否开启秒表倒计，未完成secondsFixed: {type: Boolean,default: false}},created() {// this.gogogo();},mounted() {// console.log(this);this.gogogo();},methods: {gogogo: function() {//判断是秒还是毫秒this.startTime.toString().length === 10 ? (this.star = this.startTime * 1000) : (this.star = this.startTime);this.endTime.toString().length === 10 ? (this.end = this.endTime * 1000) : (this.end = this.endTime);if (this.currentTime) {this.currentTime.toString().length === 10? (this.current = this.currentTime * 1000): (this.current = this.currentTime);console.log('this.currentTime',this.currentTime)} else {this.current = new Date().getTime();}if (this.end < this.current) {/*** 结束时间小于当前时间 活动已结束*/this.msTime.show = false;this.end_message();} else if (this.current < this.star) {/*** 当前时间小于开始时间 活动尚未开始*/this.$set(this, "tipShow", true);setTimeout(() => {this.runTime(this.star, this.current, this.start_message);}, 1);} else if ((this.end > this.current && this.star < this.current) ||this.star == this.current) {/*** 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时*/this.$set(this, "tipShow", false);this.msTime.show = true;this.$emit("start_callback", this.msTime.show);setTimeout(() => {this.runTime(this.end,this.current,this.end_message,true);}, 1);}},runTime(startTime, endTime, callFun, type) {let msTime = this.msTime;let timeDistance = startTime - endTime;if (timeDistance > 0) {this.msTime.show = true;msTime.day = Math.floor(timeDistance / 86400000);timeDistance -= msTime.day * 86400000;msTime.hour = Math.floor(timeDistance / 3600000);timeDistance -= msTime.hour * 3600000;msTime.minutes = Math.floor(timeDistance / 60000);timeDistance -= msTime.minutes * 60000;//是否开启秒表倒计,未完成// this.secondsFixed ? msTime.seconds = new Number(timeDistance / 1000).toFixed(2) : msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);msTime.seconds = Math.floor(timeDistance / 1000).toFixed(0);timeDistance -= msTime.seconds * 1000;if (msTime.hour < 10) {msTime.hour = "0" + msTime.hour;}if (msTime.minutes < 10) {msTime.minutes = "0" + msTime.minutes;}if (msTime.seconds < 10) {msTime.seconds = "0" + msTime.seconds;}let _s = Date.now();let _e = Date.now();let diffPerFunc = _e - _s;setTimeout(() => {if (type) {this.runTime(this.end,(endTime += 1000),callFun,true);} else {this.runTime(this.star, (endTime += 1000), callFun);}}, 1000 - diffPerFunc);} else {callFun();}},start_message() {this.$set(this, "tipShow", false);this.$emit("start_callback", this.msTime.show);setTimeout(() => {this.runTime(this.end, this.star, this.end_message, true);}, 1);},end_message() {this.msTime.show = false;if (this.currentTime <= 0) {return;}this.$emit("end_callback", this.msTime.show);}}
};
</script>

2. 全局引入或者局部引入注册组件

import countdown from '@/components/countdown'export default {countdown
}

3. 使用

<countdownv-if="this.info.length !== 0"v-on:start_callback="countDownS_cb(1)" // 活动开始时的回调函数v-on:end_callback="countDownE_cb(1)" // 活动结束时的回调:currentTime="Number(info.currentTime)" // 当前的时间戳:startTime="Number(info.startDate)" // 活动开始时间戳:endTime="Number(info.endDate)" // 活动结束时间戳:tipText="'活动开始倒计时'" :tipTextEnd="'活动结束倒计时'":endText="'活动已结束'":dayTxt="'天'":hourTxt="'时'":minutesTxt="'分'":secondsTxt="'秒'"></countdown>

vue 活动倒计时组件相关推荐

基于Vue.js活动倒计时组件
vue2-countdown vue活动倒计时组件及遇到的坑基于vue2.x的活动倒计时组件主要是最近为了公司做一个倒计时活动才找到了这个组件使用的.于是去github上翻看了文档结果是一年多没更 ...
vue\uniapp自定义活动倒计时组件
vue\uniapp自定义活动倒计时组件效果调用组件时传递的 timeData的属性type_id:名称,begin_time:开始时间(时间戳)end_time:结束时间(时间戳) 组件代码 & ...
Vue实现倒计时组件(可自定义时间倒计时功能的组件)：
一.创建countDown.vue(倒计时组件): <template><span :endTime="endTime" :endText="endTe ...
Vue活动倒计时的功能
Vue的活动倒计时功能话不多说,直接上代码吧,我是前端小白一枚,我搬过的砖给大家共享啦~ 欢迎大佬批评指教~ 第一步: 创建组件: <template><div class ...
手把手带你分解 Vue 倒计时组件
大家好,我是漫步,今天来分享一个Vue 组件的内部,喜欢记得关注我并设为星标. 一.前言前端开发博客入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目. 由于是一起开发,当然不会放过阅读大佬 ...
Vue回炉重造之封装防刷新考试倒计时组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
用vue实现秒杀倒计时组件
用vue实现秒杀倒计时组件开发思路代码实现下面是使用Vue实现秒杀倒计时组件开发思路 1.请求服务器获取这一刻的服务器时间(统一以服务器时间为基准) 2.获取用户当前电脑时间与服务器时间比对, ...
vue 倒计时插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
封装Vue倒计时组件vuecountdown(详细教程)
由于开发需要,捣鼓了一个倒计时组件!特此分享,希望帮助到大家先看效果倒计时来看流程,由于组件上传到远程仓库,大家可直接下载使用 npm下载 npm install --save-dev dirc ...

vue 活动倒计时组件

vue 活动倒计时组件相关推荐

最新文章

热门文章