Vue3 Typescript 前端页面5min后无操作自动退出至登录页面

芭拉拉小魔仙

于 2024-09-30 09:35:57 发布

阅读量862

点赞数 3

分类专栏： Vue3、TypeScript 文章标签：前端 typescript javascript vue vue.js

本文链接：https://blog.csdn.net/weixin_45274678/article/details/142649389

版权

效果图：
在这里插入图片描述

前端页面5min无操作，弹出弹窗提示用户系统将在30s后退出，30s后系统自动退出至登录页面。

<template>
    <div>
        <div class="f-z-20-px">
            {
   {
    remainTime }}秒后无操作将退出
        </div>
        <el-dialog
            title="您长时间未操作"
            v-model="dialogVisible"
            :close-on-click-modal="false"
            :show-close="false"
            @before-close="handleLogout()"
            width="600px">
            <p class="f-z-20-px text-center m-b-5">
                为保障您的隐私，系统将
                <b class="text-primary">{
   {
    logoutTime }}</b>
                秒后自动退出。
            </p>
            <template #footer>
            <span>
                <el-button @click="handleLogout()">手动退出</el-button>
                <el-button type="primary" @click="continueAdk()">继续问诊</el-button>
            </span>
            </template>
        </el-dialog>
        
    <