vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

问题描述：

在使用 vue 和 contextmenujs 实现鼠标右键菜单时，当菜单列表过多时，菜单高度会自动适应列表的高度，但有时会出现菜单高度不够，导致列表显示不全的问题。

解决方法：

通过设置菜单的最大高度来避免菜单高度不够导致的问题。具体操作如下：

1.首先，我们需要在 contextmenujs 的 createMenu() 方法中添加一个参数 menuOptions，用于接收在创建菜单时传递的一些配置项。菜单的 HTML 结构中也需要添加一个样式类 context-menu-wrapper，用于在样式表中设置菜单的宽度和最大高度。

function createMenu(menuItems, menuOptions = {}) {
  // ...
  const menuWrapper = document.createElement('div');
  menuWrapper.classList.add('context-menu-wrapper');
  menuWrapper.appendChild(menu);

  // 设置菜单宽度和最大高度
  const { width = '200px', maxHeight = '200px' } = menuOptions;
  menuWrapper.style.width = width;
  menuWrapper.style.maxHeight = maxHeight;

  // ...
}

2.接下来，在样式表中添加 context-menu-wrapper 类的样式，设置 overflow-y: auto 以使菜单出现滚动条，并设置 max-height 为传入的最大高度值 maxHeight。

.context-menu-wrapper {
  position: absolute;
  z-index: 10000;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  max-height: 200px; /* 这里是原来的默认值，可以根据需要修改 */
}

3.在调用 createMenu() 方法时，通过第二个参数 menuOptions 传递最大高度值 maxHeight，使菜单高度随内容动态变化，并且限制最大高度。

const menuItems = [
  { label: '菜单项1', action: () => console.log('点击了菜单项1') },
  { label: '菜单项2', action: () => console.log('点击了菜单项2') },
  { label: '菜单项3', action: () => console.log('点击了菜单项3') },
  { label: '菜单项4', action: () => console.log('点击了菜单项4') },
  { label: '菜单项5', action: () => console.log('点击了菜单项5') },
  { label: '菜单项6', action: () => console.log('点击了菜单项6') },
  { label: '菜单项7', action: () => console.log('点击了菜单项7') },
  { label: '菜单项8', action: () => console.log('点击了菜单项8') },
  { label: '菜单项9', action: () => console.log('点击了菜单项9') },
  { label: '菜单项10', action: () => console.log('点击了菜单项10') }
];
contextMenu.init(menuItems);

const options = { maxHeight: '400px' }; // 设置最大高度为 400px
contextMenu.createMenu(e, options);

示例说明：

下面以两个示例来说明如何应用上述方法解决菜单高度不够显示不全的问题。

示例一：

假设有一个列表，每一项都可以右键弹出菜单，菜单中有多个选项。

HTML 代码：

<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <!-- ... -->
</ul>

JavaScript 代码：

const menuItems = [
  { label: '编辑', action: () => console.log('点击了编辑') },
  { label: '删除', action: () => console.log('点击了删除') },
  { label: '复制', action: () => console.log('点击了复制') },
  { label: '下载', action: () => console.log('点击了下载') },
  { label: '移动', action: () => console.log('点击了移动') },
  { label: '重命名', action: () => console.log('点击了重命名') }
];

const contextMenu = new ContextMenu('#list');
contextMenu.init(menuItems);

function showContextMenu(e) {
  e.preventDefault();
  contextMenu.createMenu(e);
}

document.addEventListener('contextmenu', showContextMenu);

当菜单项过多且菜单高度不够时，可以设置最大高度为 300px：

const options = { maxHeight: '300px' };
contextMenu.createMenu(e, options);

示例二：

假设有一个表格，每一格都可以右键弹出菜单，菜单中有多个选项。

HTML 代码：

<table>
  <tr>
    <td>单元格1-1</td>
    <td>单元格1-2</td>
    <td>单元格1-3</td>
  </tr>
  <tr>
    <td>单元格2-1</td>
    <td>单元格2-2</td>
    <td>单元格2-3</td>
  </tr>
  <tr>
    <td>单元格3-1</td>
    <td>单元格3-2</td>
    <td>单元格3-3</td>
  </tr>
  <!-- ... -->
</table>

JavaScript 代码：

const menuItems = [
  { label: '复制', action: () => console.log('点击了复制') },
  { label: '粘贴', action: () => console.log('点击了粘贴') },
  { label: '剪切', action: () => console.log('点击了剪切') },
  { label: '插入行', action: () => console.log('点击了插入行') },
  { label: '插入列', action: () => console.log('点击了插入列') },
  { label: '删除行', action: () => console.log('点击了删除行') },
  { label: '删除列', action: () => console.log('点击了删除列') },
  { label: '合并单元格', action: () => console.log('点击了合并单元格') },
  { label: '拆分单元格', action: () => console.log('点击了拆分单元格') },
  { label: '格式化', action: () => console.log('点击了格式化') }
];

const contextMenu = new ContextMenu('table td');
contextMenu.init(menuItems);

function showContextMenu(e) {
  e.preventDefault();
  contextMenu.createMenu(e);
}

document.addEventListener('contextmenu', showContextMenu);

当菜单项过多且菜单高度不够时，可以设置最大高度为 400px：

const options = { maxHeight: '400px' };
contextMenu.createMenu(e, options);