vue实现浏览器禁止复制、禁用F12、禁用右侧菜单

🚀作者简介

笔名：水香木鱼

主页：​​水香木鱼的博客​​

专栏：​​后台管理系统​​

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

使用方式：将禁用代码 放在​​created​​生命周期函数中

建议：​​在单页面当中使用​​

（1）禁用右键菜单

document.oncontextmenu = new Function("event.returnValue=false");

（2）禁用鼠标选中

document.onselectstart = new Function("event.returnValue=false");

（3）禁止键盘F12键

.addEventListener("keydown", function (e) {
        if (e.key == "F12") {
          e.preventDefault(); // 如果按下键F12,阻止事件
        }
    });

（4）所有代码

created() {
    this.$nextTick(() => {
      // 1.禁用右键菜单
      document.oncontextmenu = new Function("event.returnValue=false");
      // 2.禁用鼠标选中
      document.onselectstart = new Function("event.returnValue=false");
      // 3.禁止键盘F12键
      document.addEventListener("keydown", function (e) {
        if (e.key == "F12") {
          e.preventDefault(); // 如果按下键F12,阻止事件
        }
      });
    });
  },

（5）样式实现禁用复制

使用方式：将类名绑定在需要禁用复制的标签当中

.forbiddenText {
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。