# 右键菜单包裹组件ContextMenuWrapper

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

## 1.功能说明

该组件依赖ContextMenuFC组件，可直接作为该组件的外部容器

## 2.组件依赖

- context-menu-fc

- react

## 3.组件接口

```tsx
interface Iprops {
    visible?: boolean   //组件是否可见
    width?: number      //组件宽度
    height?: number     //组件高度
    children?: React.ReactNode   //组件子节点
    container?: React.ReactNode  //用于包裹ContextMenuFC的外部容器
    closable?: boolean           //组件是否可关闭
    onVisibleChange?: (visible: boolean) => void   //组件可见状态变更
    maskStyle?: CSSProperties    //组件遮蔽样式（默认没有样式）
    wrapperClassname?: string    //外部容器类名
}
```

## 4.组件用法

在函数组件X中嵌入ContextMenuWrapper组件

1)导入组件

```tsx
import ContextMenuWrapper from "./common/context-menu/context-menu-wrapper";
```

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

```tsx
const [visible, setVisible] = useState<boolean>(false);
```

3)在函数组件X中添加ContextMenuWrapper组件

```tsx
<ContextMenuWrapper
    maskStyle={{ backgroundColor: 'rgba(0,0,0,0.25)' }}
    visible={visible}
    closable={true}
    onVisibleChange={(visible: boolean) => {
        setVisible(visible);
    }}
    width={400}
    
    container={
        <Button style={{ width: '30%' }} size="small">打开ContextMenuWrapper</Button>
    }>
    <div style={{ textAlign: 'right', marginTop: '6px' }}>
        <Space>
            <Button size="small" onClick={() => {
                setVisible(false);
            }}>关闭</Button>
        </Space>
    </div>
</ContextMenuWrapper>
```