---
nav:
#   title: Components
  path: /components
  order: 0
---

## Gmodal

### 基础用法

```tsx
import React, { useState }from 'react';
import {Button} from 'antd';
import { Gmodal } from 'widely';

export default () => {
    const [show,setShow] = useState(false);
    let obj = {
        visible:show,
        title:"基础弹框",
        centered:true,
        onCancel:()=>{setShow(false)},
    }
    return (<code title="hhhhhh">
        <Button onClick = {()=>{setShow(true)}}>打开弹框</Button>
        <Gmodal {...obj}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </Gmodal>
    </code>)
};
```

### 可拖拽弹框

```tsx
import React, { useState }from 'react';
import {Button} from 'antd';
import { Gmodal } from 'widely';

export default () => {
    const [show,setShow] = useState(false);
    let obj = {
        visible:show,
        title:"测试dialog00",
        centered:true,
        onCancel:()=>{setShow(false)},
        // wholeLoadingProps:{
        //     spinning:true,tip:'test'
        // },
        dragable:true,
        resizable:true,
        maskClosable:false,
        // autoCenterWhenReOpen:true,
        autoResetWhenReOpen:true,
        onResize:({width,height})=>{
            console.log("调整后的弹框宽度:",width,";高度:",height)
        },
    }
    return (<>
    <Button onClick = {()=>{setShow(true)}}>打开</Button>
        <Gmodal {...obj}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </Gmodal>
    </>)
};
```

### 参数说明
- #### 该组件基于`antd@4.16.3`版本做的二次开发

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | - | 0.0.3 |
| bodyStyle | Modal body 样式 | CSSProperties | - | 0.0.3 |
| cancelButtonProps | cancel 按钮 props | ButtonProps | - | 0.0.3 |
| cancelText | 取消按钮文字 | ReactNode | `取消` | 0.0.3 |
| centered | 垂直居中展示 Modal | boolean | false | 0.0.3 |
| closable | 是否显示右上角的关闭按钮 | boolean | true | 0.0.3 |
| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> | 0.0.3 |
| confirmLoading | 确定按钮 loading | boolean | false | 0.0.3 |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | 0.0.3 |
| focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 0.0.3 |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | ReactNode | (确定取消按钮) | 0.0.3 |
| forceRender | 强制渲染 Modal | boolean | false | 0.0.3 |
| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | 0.0.3 |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | 0.0.3 |
| mask | 是否展示遮罩 | boolean | true | 0.0.3 |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 0.0.3 |
| maskStyle | 遮罩样式 | CSSProperties | - | 0.0.3 |
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 0.0.3 |
| okButtonProps | ok 按钮 props | ButtonProps | - | 0.0.3 |
| okText | 确认按钮文字 | ReactNode | `确定` | 0.0.3 |
| okType | 确认按钮类型 | string | `primary` | 0.0.3 |
| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | 0.0.3 |
| title | 标题 | ReactNode | - | 0.0.3 |
| visible | 对话框是否可见 | boolean | - | 0.0.3 |
| width | 宽度 | string \| number | 520 | 0.0.3 |
| wrapClassName | 对话框外层容器的类名 | string | - | 0.0.3 |
| zIndex | 设置 Modal 的 `z-index` | number | 1000 | 0.0.3 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | 0.0.3 |
| onOk | 点击确定回调 | function(e) | - | 0.0.3 |

### 扩展参数

| 参数                 | 说明                                                         | 类型             | 默认值 | 版本  |
| -------------------- | ------------------------------------------------------------ | ---------------- | ------ | ----- |
| height               | 弹框的高度                                                   | string \| number | 400    | 0.0.3 |
| dragable             | 弹框位置是否可以拖动                                         | boolean          | false  | 0.0.3 |
| resizable            | 弹框大小是否可以调整                                         | boolean          | false  | 0.0.3 |
| reszieMinHeight      | 弹框高度调整的最小值                                         | number           | 200    | 0.0.3 |
| reszieMinWidth       | 弹框宽度调整的最小值                                         | number           | 300    | 0.0.3 |
| autoCenterWhenReOpen | 重新打开时是否重新水平垂直居中                               | boolean          | true   | 0.0.3 |
| autoResetWhenReOpen  | 重新打开时是否重置为原始设定的宽高值                         | boolean          | false  | 0.0.3 |
| onResize             | 弹框大小更改后的回调，回调参数为`{height:number,width:number}` | function(object) | -      | 0.0.3 |
| wholeLoadingProps    | 模态框的loading属性形如：`{spinning:true,tip:'test'}`,更多参数参见`antd中Spin`组件的值设定及参数 | object           | -      | 0.0.3 |