Vue自行封装常用组件-倒计时
倒计时组件,比较复杂一点,大神勿调侃,精确到毫秒,因为项目中多次出现倒计时,所以拿出来分享下
使用方法:
1.在父组件中引入"uni-countdown"
//import uniCountdown from "./uni-countdown";
2.在父组件中注册 uniCountdown
//components:{uniCountdown},
3.放在父组件中使用
//<uni-countdown></uni-countdown> 参数代码太多直接看文件里面的吧
4.调用uniCountdown组件
//this.StatusLock = true
注:index.vue为父组件,后者为子组件,效果图先上,可以先看是否是自己想要的组件,再选择使用
index.vue
<template> <div> <div class="TimingBox" v-show="StatusLock"> <div> <p class="texttitle">您的粉丝为您创造{{Amount}}元奖励</p> <p class="text">倒计时结束您将永远失去他们</p> <div class="ContentOfTheTiming"> <div style="font-size:.6rem;" class="flex center"> <uni-countdown bordercolor="#FFAA00" background="url('/wxviews/img/组10.png') center center" fontSize=".7rem" splitorColor="#fa0" :show-day="false" :hour="cdHours" :minute="cdMins" :second="cdSecs" :ms="cdMs" ></uni-countdown> </div> </div> <p class="become_a_Member">点击“立即解锁”获得该奖励</p> <div class="bigBoxBtn flex center" @click="TheBuyButton()"> <div class="TheBuyButton">立即获得</div> </div> </div> </div> </div> </template> <script> import uniCountdown from "../components/uni-countdown"; export default { data() { return { // 时 cdHours: 0, // 分 cdMins: 0, // 秒 cdSecs: 0, // 毫秒 cdMs: 60, Statuslock: false, productDetail: {}, Amount: null }; }, components:{ uniCountdown }, created() { //在钩子里面先请求接口拿到时间 this.CountDown(); }, methods: { CountDown() { //请求方式,看你们自己想用啥 就用啥 Request.post( "api/Post_GetCommissionOrderCountdown", { MemLoginId: localStorage.getItem("MemLoginId") }, res => { this.productDetail = res; this.Amount = res.Amount; //执行showTime() const countDownArr = this.showTime( null, // 拿到结束时间 EndTime this.productDetail.EndTime ).split("-"); //Status ? 1 : 0 if (res.Status === 0) { // 控制显示或隐藏 StatusLock this.StatusLock = false; return; } if ((this.cdHours = 0 && this.cdMins == 0 && this.cdSecs == 0)) { this.StatusLock = false; return; } if (this.cdHours > 0 || this.cdMins > 0 || this.cdSecs > 0) { this.StatusLock = true; this.cdHours = countDownArr[0] * 24 + countDownArr[1]; this.cdMins = countDownArr[2]; this.cdSecs = countDownArr[3]; return; } if (res.Status === 1) { this.StatusLock = true; this.cdHours = countDownArr[0] * 24 + countDownArr[1]; this.cdMins = countDownArr[2]; this.cdSecs = countDownArr[3]; return; } }, err => {} ); }, TheBuyButton(){ alert('暂时还没有开放此功能') }, showTime(startTimeStr, endTimeStr) { var startTime = startTimeStr ? new Date(startTimeStr.replace(/-/g, "/")) : new Date(); var endTime = new Date(endTimeStr.replace(/-/g, "/")); var totalSecs = (endTime - startTime) / 1000; var days = Math.floor(totalSecs / 3600 / 24); var hours = Math.floor((totalSecs - days * 24 * 3600) / 3600); var mins = Math.floor((totalSecs - days * 24 * 3600 - hours * 3600) / 60); var secs = Math.floor( totalSecs - days * 24 * 3600 - hours * 3600 - mins * 60 ); if ((days + "").slice(0, 1) != "-") { return days + "-" + hours + "-" + mins + "-" + secs; } else { return 0 + "-" + 0 + "-" + 0 + "-" + 0; } } } }; </script> <style lang="less" scoped> .TheBuyButton { width: 4rem; height: 1.2rem; background: linear-gradient( 90deg, rgba(254, 239, 54, 1) 0%, rgba(246, 197, 25, 1) 100% ); box-shadow: 0px 0px 3px 0px rgba(115, 91, 6, 1); border-radius: 0.6rem; margin: 0 auto; position: relative; color: #735b06; font-size: 0.6rem; line-height: 1.2rem; } .TimingBox { width: 100%; background: #fff; height: 6.7rem; } .ContentOfTheTiming { width: 100%; height: 1rem; margin: 0 0 0.2rem 0; } .become_a_Member { color: #fff; font-size: 0.5rem; } .djs > div { width: 13.8rem; height: 6rem; margin: 0 auto; background-color: #fff; background: url("") no-repeat; background-size: 100% 100%; background-repeat: no-repeat; text-align: center; border-radius: 0.5rem; box-sizing: border-box; } .bigBoxBtn { width: 4.3rem; height: 1.5rem; background: linear-gradient( 90deg, rgba(254, 239, 54, 1) 0%, rgba(246, 197, 25, 1) 100% ); box-shadow: 0px 1px 3px 0px rgba(115, 91, 6, 0.67); border-radius: 0.7rem; position: relative; margin: 0 auto; bottom: -0.2rem; } .center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } </style>
uni-countdown.vue
<template> <div class="uni-countdown"> <div v-if="showDay" :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize}" class="uni-countdown__number">{{ d }}</div> <div v-if="showDay" :style="{color:splitorColor}" class="uni-countdown__splitor">天</div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ h1 }}</p><hr class="hrxt"></div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ h2 }}</p><hr class="hrxt"></div> <div :style="{color:splitorColor}" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ i1 }}</p><hr class="hrxt"></div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ i2 }}</p><hr class="hrxt"></div> <div :style="{color:splitorColor}" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ s1 }}</p><hr class="hrxt"></div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ s2 }}</p><hr class="hrxt"></div> <div <div :style="{color:splitorColor}" class="uni-countdown__splitor">{{ showColon ? ':' : '秒' }}</div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ ms1 }}</p><hr class="hrxt"></div> <div :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}" class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ ms2 }}</p><hr class="hrxt"></div> <div v-if="!showColon" :style="{color:splitorColor}" class="uni-countdown__splitor">秒</div> </div> </template> <script> export default { name: 'UniCountdown', props: { showDay: { type: Boolean, default: true }, showColon: { type: Boolean, default: true }, background: { type: String, default: '#FFFFFF' }, backgroundColor: { type: String, default: '#FFFFFF' }, borderColor: { type: String, default: '#000000' }, backgroundImg: { type:String, default:"" }, fontSize: { type: String, default: '30px' }, color: { type: String, default: '#fff' }, splitorColor: { type: String, default: '#000000' }, day: { type: Number, default: 0 }, hour: { type: Number, default: 0 }, minute: { type: Number, default: 0 }, second: { type: Number, default: 0 }, ms: { type: Number, default: 0 } }, data () { return { timer: null, d: '00', h: '00', h1: '00', h2: '00', i: '00', i1: '00', i2: '00', s: '00', s1: '0', s2: '0', ms: '00', ms1: '0', ms2: '0', leftTime: 0, seconds: 0 } }, created: function (e) { this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second, this.ms) this.countDown() this.timer = setInterval(() => { this.seconds-- if (this.seconds < 0) { this.timeUp() return } this.countDown() }, 1000/60) }, beforeDestroy () { clearInterval(this.timer) }, methods: { toSeconds (day, hours, minutes, seconds, ms) { return (day * 60 * 60 * 60 * 24) + (hours * 60 * 60 * 60) + (minutes * 60 * 60) + (seconds * 60) + ms }, timeUp () { clearInterval(this.timer) this.$emit('timeup') }, countDown () { var seconds = this.seconds var [day, hour, minute, second, ms] = [0, 0, 0, 0, 0] if (seconds > 0) { day = Math.floor(seconds / (60 * 60 * 60 * 24)) hour = Math.floor(seconds / (60 * 60 * 60)) - (day * 24) minute = Math.floor(seconds / 60 / 60) - (day * 24 * 60) - (hour * 60) second = Math.floor(seconds / 60) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60) ms = Math.floor(seconds) - (day * 24 * 60 * 60 * 60) - (hour * 60 * 60 * 60) - (minute * 60 * 60) - (second * 60) } else { this.timeUp() } if (day < 10) { day = '0' + day } if (hour < 10) { hour = '0' + hour } if (minute < 10) { minute = '0' + minute } if (second < 10) { second = '0' + second } if (ms < 10) { ms = '0' + ms } this.d = day this.h = hour this.h1 = hour.toString().slice(0,1) this.h2 = hour.toString().slice(1,2) this.i = minute this.i1 = minute.toString().slice(0,1) this.i2 = minute.toString().slice(1,2) this.s = second this.s1 = second.toString().slice(0,1) this.s2 = second.toString().slice(1,2) this.ms = ms this.ms1 = ms.toString().slice(0,1) this.ms2 = ms.toString().slice(1,2) } } } </script> <style lang="scss"> $countdown-height:.8rem; .uni-countdown__number{ background-size: 100% 100%; background-repeat: no-repeat; } .uni-countdown { padding: .04rem 0; display: inline-flex; flex-wrap: nowrap; justify-content: center; &__splitor { justify-content: center; line-height: $countdown-height; padding: 0 .1rem; font-size: .6rem; } &__number { line-height: $countdown-height; justify-content: center; height: $countdown-height; border-radius: .12rem; margin: 0 .1rem; font-size: .7rem; font-weight: 500; width: .7rem; height: 1rem; box-sizing: border-box; background-size: 100% 100%; background-repeat: no-repeat; } } </style> <style lang="less"> .hrxt{ position: relative; top: -.9rem; left: 0; width: .6rem; border:1px solid #e5e5e5; } </style>