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
				} = this
				return {
					color,
					backgroundColor,
					fontSize: `${fontSize}px`,
					borderRadius: `${fontSize * 3 / 12}px`,
				}
			},
			splitorStyle() {
				const { splitorColor, fontSize, backgroundColor } = this
				return {
					color: splitorColor,
					fontSize: `${fontSize}px`,
					margin: backgroundColor ? '4px' : ''
				}
			}
		},
		watch: {
			start: {
				immediate: true,
				handler(newVal, oldVal) {
					if (newVal) {
						this.startData();
					} else {
						if (!oldVal) return
						clearInterval(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.seconds
				let [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 = day
				this.h = hour
				this.i = minute
				this.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>