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

这篇具有很好参考价值的文章主要介绍了Vue实现当前页面禁止鼠标右键,复制文本内容和F12。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

只在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);
  }

重新打开文章来源地址https://www.toymoban.com/news/detail-717282.html

 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");
  },

到了这里，关于Vue实现当前页面禁止鼠标右键,复制文本内容和F12的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！