树组件右键新增修改删除功能定位不准问题

优化前的整体代码可见vue中使用elementui实现对树组件tree右键增删改功能_element tree 右键功能_=^_^=银爪的博客-CSDN博客

 原来鼠标右键的时候定位获取的位置因为组件嵌套或者框架嵌套导致定位不准

  this.menu_left = event.clientX;

  this.menu_top = event.clientY + 10; // 以上两句话将菜单显示在鼠标点击旁边定位

把以上代码改为以下代码即可解决这个问题

先获取框架左边侧边栏的宽度，减去这个宽度和对应的padding值即可

let sideWidth = 0;
      if (document.getElementsByClassName('sidebar-container')[0]) {
        sideWidth = document.getElementsByClassName('sidebar-container')[0].clientWidth + 10 || 0;
      }
      // 以下两句话将菜单显示在鼠标点击旁边定位
      this.menu_left = event.clientX - document.getElementById('mytree').offsetLeft - sideWidth;
      this.menu_top = event.clientY - document.getElementById('mytree').offsetTop + 10;

上面所述情况比较特殊，正常的定位不准问题可以用以下方法解决

 event.preventDefault(); // 阻止默认右键菜单
 const x = event.clientX; // 获取鼠标在页面中的横坐标
 const y = event.clientY; // 获取鼠标在页面中的纵坐标
 const divRect = event.target.getBoundingClientRect(); // 获取div元素的位置信息
 const divX = x - divRect.left; // 计算鼠标在div中的横坐标
 const divY = y - divRect.top; // 计算鼠标在div中的纵坐标
 console.log('鼠标在div中的右键位置：', divX, divY);

效果图：