exam/exam-06173-vue/src/components/EventControl/index.vue

<template>
  <div style="display: none">禁用F12/右键事件启用中</div>
</template>

<script>
import { addListener, launch } from 'devtools-detector';
export default {
  name: 'EventControl',
  data() {
    return {
      threshold: 300,
      checkTimer: null,
      keyListener: function(e) {
        if (e.code === 'F12' ||
          e.code === 'MetaLeft' ||
          e.code === 'MetaRight' ||
          e.code === 'AltLeft' ||
          e.code === 'AltRight' ||
          e.code === 'ControlLeft' ||
          e.code === 'ControlRight') {
          // 阻止
          e.stopPropagation()
          e.preventDefault()
        }
      }
    }
  },
  mounted() {
    // 禁止复制
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = function() {
        return false
      }
    })

    // 禁用F12
    document.addEventListener('keydown', this.keyListener)

    // // 检查是否打开控制台
    // this.checkTimer = setInterval(() => {
    //   if (window.outerWidth - window.innerWidth > this.threshold ||
    //     window.outerHeight - window.innerHeight > this.threshold) {
    //     // 如果打开控制台，则刷新页面
    //     // window.location.reload()
    //     this.$message.warning('不允许使用调试模式，系统将在3秒后跳转到首页！')
    //     setTimeout(() => {
    //       window.location.href = '/'
    //     }, 3000)
    //   }
    // }, 3000)

    // 1. add listener
    addListener(
      isOpen => {
        if (isOpen) {
          this.$message.warning('不允许使用调试模式，系统将在3秒后跳转到首页！')
          setTimeout(() => {
            window.location.href = '/'
          }, 3000)
        }
      }
    )
    // 2. launch detect
    launch()
  },
  beforeDestroy() {
    // 还原右键
    document.oncontextmenu = function() {
      return true
    }
    // 还原F12
    document.removeEventListener('keydown', this.keyListener)

    // 清除定时器
    clearInterval(this.checkTimer)
  }
}
</script>