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

🚀作者简介

笔名：水香木鱼

主页：水香木鱼的博客

专栏：后台管理系统

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

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

---

📒技术聊斋

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

建议：在单页面当中使用

（1）禁用右键菜单

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

（2）禁用鼠标选中

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

（3）禁止键盘F12键

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

（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,阻止事件
        }
      });
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

（5）样式实现禁用复制

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

.forbiddenText {
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
1
2
3
4
5
6
7

---

📓精品推荐

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

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

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

vue实现pdf在线预览业务

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

---

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