vue禁止鼠标右键、F12和其它方式打开调试模式

created(){
    // 只在生产环境下开启
    if (process.env.NODE_ENV === "production") {
      // 1.禁用右键菜单
      document.oncontextmenu = new Function("event.returnValue=false");
      // 2.禁止键盘F12键
      document.addEventListener("keydown", function (e) {
        if (e.key == "F12") {
          e.preventDefault(); 
        }
      });

      // 3.禁止进入调试模式
      setInterval(function () {
        check()
      }, 1000);
      var check = function () {
          function doCheck(a) {
              if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
                  (function () { }
                      ["constructor"]("debugger")())
              } else {
                  (function () { }
                      ["constructor"]("debugger")())
              }
              doCheck(++a)
          }
          try {
              doCheck(0)
          } catch (err) { }
      };
    }
  },
Vue 中实现鼠标右键点击菜单项并打开新链接的功能,可以通过创建一个自定义右键菜单组件,并在菜单项上绑定点击事件来实现。具体实现方法如下: ### 1. 创建右键菜单组件结构 首先定义一个 Vue 组件 `ContextMenu.vue`,该组件接收菜单项数据,并在右键点击时显示菜单。每个菜单项可以包含一个 `url` 属性,用于指定新链接的地址。 ```vue <template> <div v-if="visible" class="context-menu" :style="{ left: x + 'px', top: y + 'px' }"> <ul> <li v-for="(item, index) in menuItems" :key="index" @click="handleItemClick(item)"> {{ item.label }} </li> </ul> </div> </template> <script> export default { data() { return { visible: false, x: 0, y: 0, menuItems: [] }; }, methods: { showMenu(event, items) { event.preventDefault(); this.menuItems = items; this.x = event.clientX; this.y = event.clientY; this.visible = true; document.addEventListener('click', this.hideMenu); }, hideMenu() { this.visible = false; document.removeEventListener('click', this.hideMenu); }, handleItemClick(item) { if (item.url) { window.open(item.url, '_blank'); } } } }; </script> <style scoped> .context-menu { position: fixed; background: white; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; } .context-menu ul { list-style: none; margin: 0; padding: 0; } .context-menu li { padding: 8px 16px; cursor: pointer; } .context-menu li:hover { background-color: #f0f0f0; } </style> ``` ### 2. 在父组件中使用右键菜单组件 在父组件中引入并注册 `ContextMenu` 组件,并定义右键点击事件以触发菜单显示。菜单项数据中包含 `url` 字段,用于指定链接地址。 ```vue <template> <div @contextmenu.prevent="showContextMenu"> 右键点击此处 <context-menu ref="contextMenu" /> </div> </template> <script> import ContextMenu from './ContextMenu.vue'; export default { components: { ContextMenu }, methods: { showContextMenu(event) { const menuItems = [ { label: '访问首页', url: 'https://example.com' }, { label: '查看文档', url: 'https://docs.example.com' } ]; this.$refs.contextMenu.showMenu(event, menuItems); } } }; </script> ``` ### 3. 菜单项点击打开新链接的实现 在 `ContextMenu.vue` 的 `handleItemClick` 方法中,通过 `window.open(item.url, '_blank')` 实现点击菜单项后在新标签页中打开链接的功能[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值