右键菜单跟随，临近边界自动调整位置

• 自定义右键菜单是一个比较常见的功能，菜单的位置也是一个很重要的参数，如果遇到菜单高度根据右键不同的对象动态变化，并且遇见页面下边界要自动向上调整位置这样的需求，话不多说直接上代码：

// table的右键点击当前行事件
    rightClick(row) {
      //单向直播无会控操作
      if (this.singleLive) return;
      event.preventDefault();
      // 初始化右键菜单数据
      this.initMenu(row);
      //获取我们自定义的右键菜单
      const menu = document.querySelector('#menu');
      const bottomBarHeight = 56;
      const menuOffsetParentHeight = 590;
      const menuLiHeight = 26;
      this.$nextTick(() => {
      	//一定要在菜单生成之后重新动态获取菜单高度，以免影响定位计算 在 nextTick 中处理
        const menuHeight = menu.children.length * menuLiHeight;
        let positionX = event.clientX;
        let positionY = event.clientY;
        //右键菜单边界位置处理
        if (positionY + menuHeight > menuOffsetParentHeight - bottomBarHeight) {
          positionY = positionY - menuHeight;
        }

        // 根据事件对象中鼠标点击的位置，进行定位
        menu.style.left = positionX + 'px';
        menu.style.top = positionY + 'px';
        // 改变自定义菜单的隐藏与显示
        this.showMenu = true;
        this.currentRowData = row;
      });
    },

---

需要注意的就是在计算菜单位置是一定要在nextTick中获取动态生成后的菜单高度来计算，如果提前获取好高度，拿到的是上一次菜单的高度，若两个高度相差较大，就会出现菜单位置与右键点击的坐标位置不吻合的问题，菜单就飘了，所以在这儿写就可以让它不管浪多远，都能记得回家的路…