监控当前的时间，当时间等于23：59：00,弹窗提示，如果用户没操作，倒数60秒后，自动触发退出事件。

shxs875

于 2023-05-31 11:20:31 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_64974855/article/details/130965207

该代码段展示了一个Vue应用，它使用ElementPlus库创建了一个定时器，在每天14:12:00时显示弹框。弹框具有确认和取消按钮，用户确认后执行退出操作。同时，文章涉及到组件生命周期钩子函数如onMounted、onUnmounted以及watchEffect的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div></div>
</template>

<script setup>
import { h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, onUnmounted, ref, watchEffect } from "vue";
const timer = ref(null);
const countdown = ref(null);
const showPopup = ref(false);

onMounted(() => {
  timer.value = setInterval(() => {
    const now = new Date();
    console.log(now,'now')
    if (
      now.getHours() === 14 &&
      now.getMinutes() === 12 &&
      now.getSeconds() === 0
    ) {
      clearInterval(timer.value);
      showPopup.value = true;
      countdown.value = setTimeout(() => {
        console.log('60秒后退出')
        // this.$emit('exit'); 60000
      }, 3000);
    }
  }, 1000);
});
watchEffect(() => {
  if (showPopup.value) {
    ElMessageBox({
      title: "标题",
      message: h("p", null, [
        h("span", null, "内容 "),
      ]),
      showCancelButton: true,
      confirmButtonText: "OK",
      cancelButtonText: "Cancel",
      beforeClose: (action, instance, done) => {
        if (action === "confirm") {
          clearTimeout(countdown.value);
          console.log('点击了退出')
        //     this.$emit('exit');
        done();
        } else {
          done();
        }
      },
    }).then((action) => {
      ElMessage({
        type: "info",
        message: `action: ${action}`,
      });
    });
  }
});
onUnmounted(() => {
  clearInterval(timer.value);
  clearTimeout(countdown.value);
});
</script>

<style scoped></style>