vue实现时间倒计时/时间增加组件

时间倒计时/时间增加组件

<template><div class="s-countdown"><span v-if="showDay" :style="[timeStyle]" class="s-countdown__number">{{ d }}</span><span :style="[timeStyle]" class="s-countdown__number">{{ h }}</span><span :style="[splitorStyle]" class="s-countdown__splitor">{{ showColon ? ':' : hourText }}</span><span :style="[timeStyle]" class="s-countdown__number">{{ i }}</span><span :style="[splitorStyle]" class="s-countdown__splitor">{{ showColon ? ':' : minuteText }}</span><span :style="[timeStyle]" class="s-countdown__number">{{ s }}</span><span v-if="!showColon" :style="[splitorStyle]" class="s-countdown__splitor">{{secondText}}</span></div>
</template>
<script>/*** Countdown 倒计时* @description 倒计时组件* @tutorial https://ext.dcloud.net.cn/plugin?id=25* @property {String} backgroundColor 背景色* @property {String} color 文字颜色* @property {Number} day 天数* @property {Number} hour 小时* @property {Number} minute 分钟* @property {Number} second 秒* @property {Number} timestamp 时间戳* @property {Boolean} showDay = [true|false] 是否显示天数* @property {Boolean} showColon = [true|false] 是否以冒号为分隔符* @property {Boolean} hourText/ minuteText /secondText = 分隔符文案* @property {String} splitorColor 分割符号颜色* @event {Function} timeup 倒计时时间到触发事件* @example <s-countdown sort="descending" :day="1" :hour="1" :minute="12" :second="40"></s-countdown>*/export default {name: 'sCountdown',emits: ['timeup'],props: {sort: {type: String,default: 'descending' //默认倒计时 ascending 时间增加},showDay: {type: Boolean,default: true},showColon: {type: Boolean,default: true},start: {type: Boolean,default: true},backgroundColor: {type: String,default: ''},color: {type: String,default: '#333'},fontSize: {type: Number,default: 12},splitorColor: {type: String,default: '#333'},day: {type: Number,default: 0},hour: {type: Number,default: 0},minute: {type: Number,default: 0},second: {type: Number,default: 0},timestamp: {type: Number,default: 0},hourText: {type: String,default: '时'},minuteText: {type: String,default: '分'},secondText: {type: String,default: '秒'}},data() {return {timer: null,d: '00',h: '00',i: '00',s: '00',seconds: 0}},computed: {timeStyle() {const {color,backgroundColor,fontSize} = thisreturn {color,backgroundColor,fontSize: `${fontSize}px`,borderRadius: `${fontSize * 3 / 12}px`,}},splitorStyle() {const { splitorColor, fontSize, backgroundColor } = thisreturn {color: splitorColor,fontSize: `${fontSize}px`,margin: backgroundColor ? '4px' : ''}}},watch: {start: {immediate: true,handler(newVal, oldVal) {if (newVal) {this.startData();} else {if (!oldVal) returnclearInterval(this.timer)}}}},created: function(e) {this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)this.countDown()},destroyed() {clearInterval(this.timer)},methods: {toSeconds(timestamp, day, hours, minutes, seconds) {if (timestamp) {return timestamp - parseInt(new Date().getTime() / 1000, 10)}return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds},timeUp() {clearInterval(this.timer)this.$emit('timeup')},countDown() {let seconds = this.secondslet [day, hour, minute, second] = [0, 0, 0, 0]if (seconds > 0) {if(this.showDay){day = Math.floor(seconds / (60 * 60 * 24))hour = Math.floor(seconds / (60 * 60)) - (day * 24)minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)}else{hour = Math.floor(seconds / 3600)minute =  Math.floor((seconds - hour* 3600) / 60) second = seconds - hour* 3600 - minute * 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}this.d = daythis.h = hourthis.i = minutethis.s = second},startData() {this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)if (this.seconds <= 0) {this.seconds = this.toSeconds(0, 0, 0, 0, 0)this.countDown()return}clearInterval(this.timer)this.countDown()this.timer = setInterval(() => {if(this.sort === 'descending'){this.seconds--}else{this.seconds++}if (this.seconds < 0) {this.timeUp()return}this.countDown()}, 1000)},update(){this.startData();},}}
</script>
<style lang="scss" scoped>$font-size: 14px;.s-countdown {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;&__splitor {margin: 0 2px;font-size: $font-size;color: #333;}&__number {border-radius: 3px;text-align: center;font-size: $font-size;}}
</style>