自定义右键菜单是一个比较常见的功能，菜单的位置也是一个很重要的参数，如果遇到菜单高度根据右键不同的对象动态变化，并且遇见页面下边界要自动向上调整位置这样的需求，话不多说直接上代码：
// 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中获取动态生成后的菜单高度来计算，如果提前获取好高度，拿到的是上一次菜单的高度，若两个高度相差较大，就会出现菜单位置与右键点击的坐标位置不吻合的问题，菜单就飘了，所以在这儿写就可以让它不管浪多远，都能记得回家的路…
