48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div v-if="showButton">
|
||
|
|
<button @click="handleClick">{{ countdownText }}</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted, onUnmounted,computed } from 'vue';
|
||
|
|
|
||
|
|
// 定义属性
|
||
|
|
const showButton = ref(true);
|
||
|
|
const countdownTime = ref(10); // 三分钟以秒为单位
|
||
|
|
|
||
|
|
// 计算倒计时文本
|
||
|
|
const countdownText = computed(() => {
|
||
|
|
const minutes = Math.floor(countdownTime.value / 60).toString().padStart(2, '0');
|
||
|
|
const seconds = (countdownTime.value % 60).toString().padStart(2, '0');
|
||
|
|
return `点击我 (${minutes}:${seconds})`;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 创建计时器
|
||
|
|
let intervalId;
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
intervalId = setInterval(() => {
|
||
|
|
if (countdownTime.value > 0) {
|
||
|
|
countdownTime.value--;
|
||
|
|
} else {
|
||
|
|
clearInterval(intervalId);
|
||
|
|
showButton.value = false;
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
// 确保清除计时器以防止内存泄漏
|
||
|
|
clearInterval(intervalId);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 按钮点击事件处理函数
|
||
|
|
const handleClick = () => {
|
||
|
|
alert('按钮被点击了！');
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 添加你的样式 */
|
||
|
|
</style>
|