vue3 切屏事件监听（考试防作弊）

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

1、@vueuse

npm i @vueuse/core

import { ref, reactive, watch, onUnmounted } from "vue";
import { useDocumentVisibility } from "@vueuse/core";

// visibility 离开页面-hidden  进入页面-visible
const visibility = useDocumentVisibility();

// 切屏数据
const screenCutting = reactive({
	setTime: 3, // 设置切屏时间
	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;
		}
	}
});

onUnmounted(() => {
	unwatch();
});

2、vant 自带 @vant/use

npm i @vant/use

import { watch } from 'vue';
import { usePageVisibility } from '@vant/use';

export default {
  setup() {
    const pageVisibility = usePageVisibility();

    watch(pageVisibility, (value) => {
      console.log('visibility: ', value);
    });
  },
};

3、原生

document.addEventListener("visibilitychange", function () {
  const state = document.visibilityState;

  if (state === "visible") {
    console.log("visible", new Date().getTime());
  } else if (state === "hidden") {
    console.log("hidden", new Date().getTime());
  }
});