Vue实现当前页面禁止鼠标右键,复制文本内容和F12

Vue安夏

已于 2023-05-12 10:51:31 修改

阅读量1.2k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-05-05 11:27:49 首次发布

本文链接：https://blog.csdn.net/fitnesssnail/article/details/130503315

版权

只在mounted（）里面写下面的代码，在进入这个页面前其他页面是能正常的使用鼠标右键,复制文本内容和F12，但进入当前页后再出来就会影响到其他页面

所以要做到只控制当前页，我们需要在destroyed（）钩子中把这些禁止重新打开，这样就能实现该功能了

  mounted() {
    setTimeout(() => {
      if (this.copy_switch == false) {
        this.$nextTick(() => {
          // 禁用右键
          document.oncontextmenu = new Function("event.returnValue=false");
          // 禁用选择
          document.onselectstart = new Function("event.returnValue=false");
          // 禁用F12
          document.onkeydown = () => {
            if (window.event && window.event.keyCode == 123) {
              return false
            }
          }
        });
      } else {
        this.$nextTick(() => {
          // 打开右键
          document.oncontextmenu = new Function("event.returnValue=true");
          // 打开选择
          document.onselectstart = new Function("event.returnValue=true");
          // 打开F12
          document.onkeydown = () => {
            if (window.event && window.event.keyCode == 123) {
              return true
            }
          }
        });
      }
    }, 1000);
  }

重新打开

 destroyed() {
    document.onkeydown = () => {
      if (window.event && window.event.keyCode == 123) {
        return true
      }
    }
    document.onselectstart = new Function("event.returnValue=true");
    document.oncontextmenu = new Function("event.returnValue=true");
  },