【vue】vue2 禁用控制台、右键 | 代码防扒

新建ban.js文件

document.onkeydown = () => {
  //禁用F12
  if (window.event && window.event.keyCode == 123) {
    return false;
    //禁用ctrl+shift+i,
  } else if (
    window.event.ctrlKey &&
    window.event.shiftKey &&
    window.event.keyCode == 73
  ) {
    return false;
    //屏蔽Shift+F10
  } else if (window.event.shiftKey && window.event.keyCode == 121) {
    return false;
  }
};
// 通过高顿判断是否打开控制台
// var threshold = 200;
// this.timer1 = setInterval(function () {
//   //当浏览器窗口宽度或高度与页面的宽度和高度的差值大于00的时候触发页面刷新
//   if (
//     window.outerWidth - window.innerWidth > threshold ||
//     window.outerHeight - window.innerHeight > threshold
//   ) {
//     // 刷新页面;
//     window.location.reload();
//     alert("请关闭控制台重新输入地址进入网站");
//   }
// });
document.oncontextmenu = new Function("event.returnValue=false");

在app.vue中引入ban.js文件即可

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在Vue中实现自定义的鼠标右键菜单,你可以借助第三方插件或者自己编写代码来实现。下面是一个使用第三方插件 `vue-contextmenu` 的示例: 首先,安装 `vue-contextmenu` 插件: ```shell npm install vue-contextmenu ``` 然后,在你的Vue项目中,导入并注册 `vue-contextmenu` 插件: ```javascript import VueContextmenu from 'vue-contextmenu'; Vue.use(VueContextmenu); ``` 接下来,在需要添加右键菜单的元素上使用 `v-contextmenu` 指令,并绑定一个方法来定义菜单的内容和行为: ```html <template> <div> <div v-contextmenu="contextMenu"> Right-click me! </div> </div> </template> <script> export default { data() { return { contextMenu: [ { text: '菜单项1', action: 'menuItem1' }, { text: '菜单项2', action: 'menuItem2' }, { text: '菜单项3', action: 'menuItem3' } ] }; }, methods: { menuItem1() { console.log('执行菜单项1的操作'); }, menuItem2() { console.log('执行菜单项2的操作'); }, menuItem3() { console.log('执行菜单项3的操作'); } } }; </script> ``` 在这个例子中,`contextMenu` 数组定义了右键菜单的内容,每个菜单项都有一个 `text` 属性用于显示菜单项的文本,以及一个 `action` 属性用于定义菜单项被点击时要执行的方法。 运行项目后,当你在指定的元素上右键点击时,就会弹出自定义的右键菜单,并执行相应的方法。 除了使用第三方插件外,你也可以根据需求自己编写代码来实现自定义的鼠标右键菜单。这需要使用原生JavaScript事件来捕获右键点击事件,并自定义菜单的样式和行为。 希望对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fruge365

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值