记一次关于考试系统-切屏限制的提示

通过监听离开页面时时间戳和再次进来时的时间戳判断切屏时间，计算切屏次数

@vueuse

npm i @vueuse/core

import { reactive, watch, onUnmounted } from 'vue'
import { useDocumentVisibility } from '@vueuse/core'
import { ElMessageBox } from 'element-plus'
import { showDialog } from 'vant'

export default function useScreenCutting (killExam, type = 'PC') {
    // visibility 离开页面-hidden  进入页面-visible
    const visibility = useDocumentVisibility()

    // 切屏数据
    const screenCutting = reactive({
        setTime: 0, // 设置切屏时间
        setNum: 3, // 设置切屏数量
        time: 0, // 实际时间
        num: 0 // 实际数量
    })

    // 监听 visibility
    const unwatch = watch(visibility, (current, previous) => {
        if (current === 'hidden') {
            // 记住离开当前时间戳
            screenCutting.time = new Date().getTime()
        }
        if (current === 'visible' && previous === 'hidden') {
            // 进来时间戳
            const currentTime = new Date().getTime()
            // 时间单位 s
            const diff = (currentTime - screenCutting.time) / 1000
            if (diff >= screenCutting.setTime) {
                // 切屏数量 + 1
                screenCutting.num += 1
            }

            if (screenCutting.num < 3) {
                if (type === 'PC') {
                    ElMessageBox.alert(`您已经离开页面${screenCutting.num}次, 达到3次系统将自动交卷`, '提醒', {
                        confirmButtonText: '确认'
                    })
                } else {
                    showDialog({
                        title: '提醒',
                        message: `您已经离开页面${screenCutting.num}次, 达到3次系统将自动交卷`
                    }).then(() => {
                        // on close
                    })
                }
            } else {
                // 自动交卷逻辑
                killExam()
            }
        }
    })

    onUnmounted(() => {
        unwatch()
    })
    return {
        screenCutting,
        visibility
    }
}

目前项目是有两套路由, 一套PC一道MOBILE, 进而提示信息的ui组件用了两个区分开来, 之后传入一个回调函数 用来自动结束任务