uniProject/pages/xinshuxue/components/tishiDl.vue

<template>
	<!-- 弹窗 -->
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
		mask-background-color="rgba(0,0,0, 0.76);">
		<view  class="ezy-tip-dialog tip-e-dialog ">
			<view class="close-btn" @click="handleClose"></view>
			<view class="e-img kx-e-img"></view>
			<view class="text-score">完成了本节基础课程的学习</view>
			<view class="time-tip-box" v-if="times">({{count}}S)</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from "vue"

	const times = ref(null)
	const count = ref(5);
	const popupRef = ref(null);


	function initTime() {
			times.value = setTimeout(() => {
				if (count.value == 0) {
					handleClose();
					return;
				}
				count.value--;
				initTime()
			}, 1000)
		}

	function clearTime() {
		clearTimeout(times.value);
		times.value = null;
		count.value = 5;
	}

	function handleClose() {
		clearTime();
		popupRef.value.close();
	}

	function open() {
		popupRef.value.open();
		nextTick(() => initTime())
	}

	defineExpose({
		open
	})
</script>

<style>
</style>