如何基于Semantic UI实现鼠标点击位置触发的上下文菜单？

当然可行！Semantic UI的Popup组件虽然预设了top left、bottom center这类固定位置选项，但完全可以通过动态获取鼠标坐标并设置样式，实现点击位置精准显示上下文菜单的效果。下面是React环境下的具体实现方案：

核心思路 #

1. 监听鼠标点击（或右键点击）事件，获取点击时的屏幕坐标clientX和clientY
2. 用状态管理菜单的显示状态和定位坐标
3. 给Popup组件设置fixed定位，动态绑定坐标值，覆盖默认的位置规则

代码示例 #

import React, { useState } from 'react';
import { Popup, Menu } from 'semantic-ui-react';

const ContextMenu = () => {
  // 管理菜单的显示状态和定位坐标
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });

  // 处理右键点击事件（也可以换成左键点击，根据需求调整）
  const handleContextMenu = (e) => {
    e.preventDefault(); // 阻止浏览器默认右键菜单
    // 记录鼠标点击坐标
    setMenuPosition({ x: e.clientX, y: e.clientY });
    setIsMenuOpen(true);
  };

  return (
    <div>
      {/* 触发上下文菜单的容器 */}
      <div 
        onContextMenu={handleContextMenu}
        style={{ 
          padding: '40px', 
          border: '1px solid #eee', 
          maxWidth: '600px',
          margin: '20px auto'
        }}
      >
        右键点击此区域打开自定义上下文菜单
      </div>

      {/* 自定义上下文菜单（基于Popup组件） */}
      <Popup
        open={isMenuOpen}
        onClose={() => setIsMenuOpen(false)}
        // 动态设置定位，覆盖Semantic UI的默认位置
        style={{
          position: 'fixed',
          left: menuPosition.x,
          top: menuPosition.y,
          marginTop: 0, // 清除Popup默认的margin偏移
          marginLeft: 0,
          zIndex: 1000 // 确保菜单在最上层
        }}
        // 菜单内容可以用Semantic UI的Menu组件自定义
        content={
          <Menu compact>
            <Menu.Item onClick={() => setIsMenuOpen(false)}>复制</Menu.Item>
            <Menu.Item onClick={() => setIsMenuOpen(false)}>粘贴</Menu.Item>
            <Menu.Item onClick={() => setIsMenuOpen(false)}>删除</Menu.Item>
            <Menu.Item onClick={() => setIsMenuOpen(false)}>查看详情</Menu.Item>
          </Menu>
        }
      />
    </div>
  );
};

export default ContextMenu;

额外优化建议 #

• 边界处理：可以添加逻辑判断，如果鼠标点击位置靠近屏幕边缘，自动调整菜单位置避免超出视口（比如判断menuPosition.x + 菜单宽度 > window.innerWidth时，将left设为menuPosition.x - 菜单宽度）
• 左键触发：如果需要左键点击显示菜单，把onContextMenu换成onClick即可
• 样式调整：可以给Popup的content添加自定义类名，调整菜单的背景、边框等样式，和Semantic UI的风格保持一致

内容的提问来源于stack exchange，提问作者Indoor Picnic