uniapp封装计时器组件 vue3

uniapp封装计时器组件

介绍

uniapp 是一个使用 Vue.js 开发小程序的框架，本文将介绍如何封装一个计时器组件，并在 uniapp 中使用。

实现步骤

1. 导入依赖

import { ref, computed } from 'vue'

这部分代码导入了 Vue 3 中的 ref 和 computed 函数，用于创建响应式变量和计算属性。

2. 定义响应式变量

const timer = ref(0)
const isStart = ref(false)
const isPause = ref(false)
let intervalId = null

• timer：用于存储计时器的值，初始值为 0。
• isStart：标记计时器是否已经开始，初始值为 false。
• isPause：标记计时器是否处于暂停状态，初始值为 false。
• intervalId：用于存储 setInterval 返回的 ID，以便后续清除定时器。

3. 定义事件发射器

const emit = defineEmits(['StartTimer', 'StopTimer'])

定义了两个事件 StartTimer 和 StopTimer，用于在计时器开始和结束时通知父组件。

4. 定义计时器控制函数

开始计时

const timerStart = () => {
	if(isStart.value) return;
	intervalId = setInterval(() => {
		timer.value++
	}, 1000)
	isStart.value = true
	isPause.value = false
	emit('StartTimer', isStart.value)
}

• 检查计时器是否已经开始，如果已经开始则直接返回。
• 使用 setInterval 每秒增加 timer 的值。
• 设置 isStart 为 true，isPause 为 false。
• 发射 StartTimer 事件。

暂停计时

const timerPause = () => {
	if(isStart.value && !isPause.value) {
		clearInterval(intervalId)
		isPause.value = true
	}
}

• 检查计时器是否已经开始且未暂停，如果是则清除定时器并设置 isPause 为 true。

继续计时

const timerContinue = () => {
	if(isStart.value && isPause.value) {
		intervalId = setInterval(() =>{
			timer.value++
		}, 1000)
		isPause.value = false
	}
}

• 检查计时器是否已经开始且处于暂停状态，如果是则重新启动定时器并设置 isPause 为 false。

结束计时

const timerStop = () =>{
	if(!isStart.value) return
	clearInterval(intervalId)
	isStart.value = false
	isPause.value = false
	timer.value = 0
	emit('StopTimer', isStart.value)
}

• 检查计时器是否已经开始，如果未开始则直接返回。
• 清除定时器，重置所有状态变量，并将 timer 重置为 0。
• 发射 StopTimer 事件。

5. 定义计算属性

const computed_timer = computed(() => {
	if(timer.value < 60 ) {
		if(timer.value >= 10) {
			return `00 : ${timer.value}`
		} else {
			return `00 : 0${timer.value}`
		}
	} else {
		const min = parseInt(timer.value / 60)
		const sec = timer.value - ( min * 60 )
		if( min < 10 ) {
			if(sec >= 10) {
				return  `0${min} : ${sec}`
			} else {
				return  `0${min} : 0${sec}`
			}
		} else {
			if(sec >= 10) {
				return  `${min} : ${sec}`
			} else {
				return  `${min} : 0${sec}`
			}
		}
	}
})

• 根据 timer 的值格式化显示时间，分为分钟和秒，并确保格式正确。

6. 暴露方法

defineExpose({
	timerPause,
	timerContinue
})

将 timerPause 和 timerContinue 方法暴露给外部组件。

7. 模板部分

<template>
	<view class="components-timer">
		<view class="timer"> {{ computed_timer }}</view>
		<view class="timer-btn">
			<view class="timer-btn-item" @click="timerStart">开始</view>
			<view class="timer-btn-item" @click="timerStop">结束</view>
		</view>
	</view>
</template>

• 显示格式化后的计时器时间。
• 提供“开始”和“结束”按钮，分别调用 timerStart 和 timerStop 方法。

8. 样式部分

<style scoped lang="scss">
	.components-timer {
		width: 100%;
		height: 280rpx;
		border: 1px solid #ccc;
		border-radius: 30rpx;
		.timer{
			width: 40%;
			margin: 50rpx auto 30rpx;
			text-align: center;
			font-size: 60rpx;
		}
		.timer-btn{
			display: flex;
			justify-content: space-around;
			width: 80%;
			margin: auto;
			.timer-btn-item {
				width: 150rpx;
				height: 75rpx;
				line-height: 75rpx;
				border: 1px solid #ccc;
				border-radius: 20rpx;
				text-align: center;
			}
		}
	}
</style>

定义了组件的样式，包括计时器显示和按钮的布局。

总结

该代码实现了一个简单的计时器组件，具有开始、暂停、继续和结束计时的功能。通过 Vue 3 的响应式系统和计算属性，实现了计时器的动态显示和状态管理。组件通过事件与父组件通信，并提供了基本的样式布局。主要功能包括：

• 开始计时：每秒增加计时器值。
• 暂停计时：停止计时器增加。
• 继续计时：恢复计时器增加。
• 结束计时：重置计时器并停止计时。
• 格式化显示：将计时器值格式化为分钟和秒的显示格式。

使用方法

1. 在 script 标签中导入组件

<script setup>
  import Timer from '@/components/Timer.vue'
	import { ref } from 'vue'

  const timerRef = ref(null)
	
	const handleStart = (e) => {
		console.log(e)
    // 调用组件中的方法 暂停计时
		timerRef.value.timerPause()
    // 调用组件中的方法 继续计时
    // timerRef.value.timerContinue()
	}
	
	const handleStop = (e) => {
		console.log(e)
    // ...
	}
</script>

2. 在 template 标签中使用组件

<template>
	<view>
		<Timer ref='timerRef' @StartTimer="handleStart" @StopTimer="handleStop"></Timer>
	</view>
</template>