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

Posted 2022-09-13 水香木鱼

🚀作者简介

笔名：水香木鱼

主页：水香木鱼的博客

专栏：后台管理系统

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

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

---

📒技术聊斋

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

建议：在单页面当中使用

（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,阻止事件
        
    );

（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;

---

📓精品推荐

vue封装返回顶部组件【cv可用】

vue实现keep-alive页面缓存【三步骤配置，一步到位】

vue实现搜索、提交等功能【回车事件】

vue实现pdf在线预览业务

前端vue路由模块拆分归类【理解版】

---

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