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

前言

pc端开发中我们经常会遇见一些页面，会因为刷新，渲染，卡顿出现文字选中效果
或者一些敏感的页面我们不希望用户复制，选中，页面的文字信息，比如考试，敏感信息
其实这些也是可以通过代码控制的，这样可以使项目更加安全，合理。
把代码写在页面mounted就是这个页面不可以复制，选中，右键，写在app.vue页面的mounted就是整个项目不可以选中，复制，选择

代码实现

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

总结：

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