# 右键菜单组件ContextMenuFC

组件来源: 办公系统v3 - common组件

## 1.功能说明

该组件用于构造一个可控制是否可见的小弹窗，可用于右键菜单。也可用于其他内容。

## 2.组件依赖

- classnames

- react

- react-dom

## 3.组件接口

| 变量名   | 变量类型  | 变量作用  |
| :----: |:----:| :---------:|
| left  | number | 右键菜单左侧绝对位置 |
| top   | number | 右键菜单顶部绝对位置 |
| autoAdjust | boolean | 自动判断位置使菜单不超出屏幕区域 |
| width  | number | 右键菜单宽度  |
| visible  | boolean  | 右键菜单是否可见  |
| mask  | boolean  | 是否采用遮蔽  |
| wrapperClassname  | string  |  外层容器名 |
| children  | React.ReactNode  |  子节点 |
| forceRender  | boolean  | 是否强制渲染  |
| onCancel  |  () => void | 点击菜单外执行的取消命令  |
| onEscape |  () => void |  按Esc按钮执行的命令 |
| onRightClick  | () => void  | 鼠标右键  |
| maskStyle  | CSSProperties  | 遮蔽时的样式（默认没有样式的） |
| modalRender | (modal: ReactNode) => ReactNode | 可以在modal体外包裹组件，实现自定义功能，如拖拽 |

    // 
    modalRender?: (modal: ReactNode) => ReactNode

## 4.组件用法

在某个函数组件X中为某个div添加右键菜单，步骤如下

1)导入组件

```tsx
import ContextMenuFC from "@/common/context-menu/context-menu-fc";
```

2)在函数组件X中用useState设置控制组件位置、宽度、是否可见的变量

```tsx
const [contextMenuVisible, setContextMenuVisible] = useState<boolean>(false);
const [contextMenuTop, setContextMenuTop] = useState<number>(null);
const [contextMenuLeft, setContextMenuLeft] = useState<number>(null);
const [contextMenuWidth, setContextMenuWidth] = useState<number>(140);
```

3)如下编写需要添加右键菜单的组件

```tsx
 <div
  onContextMenu={(e) => {
      e.preventDefault();
      e.stopPropagation();
      let clientX = e.clientX;
      let clientY = e.clientY;
      setContextMenuLeft(clientX);
      setContextMenuTop(clientY);
      setContextMenuVisible(true);
  }}    
  >一个具有右键菜单的组件</div>
```

4)在函数组件X中添加ContextMenuFC组件

```tsx
<ContextMenuFC
    visible={contextMenuVisible}
    left={contextMenuLeft}
    top={contextMenuTop}
    width={contextMenuWidth}
    wrapperClassname={/* 外层容器className */}
    onCancel={() => {
        setContextMenuVisible(false)
    }}>
    {/* 任务的右键菜单具体内容 */}
    <div className="ope-menu">
        右键菜单具体内容
    </div>
</ContextMenuFC>
```