vue-pc端禁止用户选中文字-右键-复制

前言

• pc端开发中我们经常会遇见一些页面，会因为刷新，渲染，卡顿出现文字选中效果

• 或者一些敏感的页面我们不希望用户复制，选中，页面的文字信息，比如考试，敏感信息

• 其实这些也是可以通过代码控制的，这样可以使项目更加安全，合理。

• 把代码写在页面mounted就是这个页面不可以复制，选中，右键，写在app.vue页面的mounted就是整个项目不可以选中，复制，选择

代码实现

this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function("event.returnValue=false");
      // 禁用选择
      document.onselectstart = new Function("event.returnValue=false");
      //禁止f12
      document.onkeydown = new Function("event.returnValue=false");
    });
    // 上面的禁止f12那段代码没有生效，可以使用下面的禁用f12。
    document.onkeydown = function (e) {
      if (e && e.keyCode === 123) {
        e.returnValue = false;
        return false;
      }
    };

---

总结：

经过这一趟流程下来相信你也对 vue-pc端禁止用户选中文字-右键-复制 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕