上传代码

uniapp04/pages/testsix/testsix.vue

@@ -0,0 +1,48 @@
+<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>