## OPDialog 弹窗组件

·API

| 参数           | 说明                                                                                                                                                                                                                                           | 类型              | 默认值           |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ---------------- |
| visible        | 是否显示                                                                                                                                                                                                                                       | Boolean           | false            |
| title          | 标题                                                                                                                                                                                                                                           | ReactNode         | -                |
| subTitle       | 子标题                                                                                                                                                                                                                                         | ReactNode         | -                |
| onOk           | 在点击确定按钮时触发的回调函数                                                                                                                                                                                                                 | Function          | () => {}         |
| onCancel       | 在点击取消/关闭按钮时触发的回调函数                                                                                                                                                                                                            | Function          | () => {}         |
| okText         | 确认按钮文字                                                                                                                                                                                                                                   | ReactNode         | 确定[Enter]      |
| cancelText     | 取消按钮文字                                                                                                                                                                                                                                   | ReactNode         | 取消[Esc]        |
| size           | 弹窗大小 small = 680、medium = 900、large = 1200                                                                                                                                                                                               | Enum              | small            |
| icon           | 标题图标 success、warning、about、notice                                                                                                                                                                                                       | Enum              | -                |
| footerActions  | 指定确定按钮和取消按钮是否存在以及如何排列 <br />可选值：['ok', 'cancel']（确认取消按钮同时存在，确认按钮在左） <br />['cancel', 'ok']（确认取消按钮同时存在，确认按钮在右） <br />['ok']（只存在确认按钮） <br />['cancel']（只存在取消按钮） | Array             | ['cancel', 'ok'] |
| footer         | 底部内容                                                                                                                                                                                                                                       | Boolean/ReactNode | true             |
| maskClosable   | 点击蒙层是否允许关闭                                                                                                                                                                                                                           | Boolean           | true             |
| bodyStyle      | Modal body 样式                                                                                                                                                                                                                                | CSSProperties     | -                |
| loading        | 确定按钮的 loading 状态                                                                                                                                                                                                                        | Boolean           | false            |
| okHotKey       | 确定按钮的 hotkey                                                                                                                                                                                                                              | String            | Enter            |
| cancelHotKey   | 取消按钮的 hotkey                                                                                                                                                                                                                              | String            | Esc              |
| okDisabled     | 确定按钮是否禁用                                                                                                                                                                                                                               | Boolean           | -                |
| cancelDisabled | 取消按钮是否禁用                                                                                                                                                                                                                               | Boolean           | -                |
| className      | 自定义样式类，可选                                                                                                                                                                                                                             | String            | ''               |

```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Field } from '@alife/cn-ui';
import { OPDialog, OPButton, OPForm } from '../src/view';

const TestDialog = () => {
  const [visible, setVisible] = useState(false);
  const [subtitleVisible, setSubtitleVisible] = useState(false);
  const [iconVisible, setIconVisible] = useState(false);
  const [noFooter, setNoFooter] = useState(false);
  const [cancelType, setCancelType] = useState(false);
  const [footerSort, setFooterSort] = useState(false);
  const [customeFooter, setCustomeFooter] = useState(false);
  const [customeHotKey, setCustomeHotKey] = useState(false);

  const openDialog = () => setVisible(true);
  const closeDialog = () => setVisible(false);
  const openDialogSubtitle = () => setSubtitleVisible(true);
  const closeDialogSubtitle = () => setSubtitleVisible(false);
  const openDialogIcon = () => setIconVisible(true);
  const closeDialogIcon = () => setIconVisible(false);
  const openDialogNoFooter = () => setNoFooter(true);
  const closeDialogNoFooter = () => setNoFooter(false);
  const openDialogFooterSort = () => setFooterSort(true);
  const closeDialogFooterSort = () => setFooterSort(false);
  const openDialogCancelType = () => setCancelType(true);
  const closeDialogCancelType = () => setCancelType(false);
  const openDialogCustomeFooter = () => setCustomeFooter(true);
  const closeDialogCustomeFooter = () => setCustomeFooter(false);
  const openDialogCustomHotKey = () => setCustomeHotKey(true);
  const closeDialogCustomHotKey = () => setCustomeHotKey(false);

  const field = Field.useField();

  const handleOk = () => {
    alert('点击了确定');
  };

  const handleOk1 = () => {
    const datepicker = field.getValue('datepicker');
    alert(`你选择了${datepicker}`);
  };

  return (
    <>
      <OPButton onClick={openDialog}>默认</OPButton>
      <OPButton onClick={openDialogSubtitle}>二级标题 & 错误状态</OPButton>
      <OPButton onClick={openDialogIcon}>Icon</OPButton>
      <br />
      <OPButton onClick={openDialogNoFooter}>No Footer</OPButton>
      <OPButton onClick={openDialogFooterSort}>
        确定取消按钮是否存在及如何排列
      </OPButton>
      <OPButton onClick={openDialogCancelType}>引用其他fusion组件</OPButton>
      <OPButton onClick={openDialogCustomeFooter}>自定义footer</OPButton>
      <OPButton onClick={openDialogCustomHotKey}>自定义hotkey</OPButton>

      <OPDialog
        title='测试默认'
        visible={visible}
        onOk={handleOk}
        onCancel={closeDialog}
        okDisabled={true}
        cancelDisabled={false}
      >
        <p>Some Content....</p>
        <p>Some Content....</p>
        <p>Some Content....</p>
      </OPDialog>
      <OPDialog
        title='我是大标题'
        visible={subtitleVisible}
        subTitle='我是二级标题'
        onOk={handleOk}
        onCancel={closeDialogSubtitle}
        state='error'
      >
        <p>Some Content....</p>
      </OPDialog>
      <OPDialog
        title='测试icon'
        visible={iconVisible}
        onOk={handleOk}
        onCancel={closeDialogIcon}
        icon='notice'
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='没有footer'
        visible={noFooter}
        onOk={handleOk}
        onCancel={closeDialogNoFooter}
        footer={false}
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='指定确定按钮和取消按钮是否存在以及如何排列'
        visible={footerSort}
        onOk={handleOk}
        onCancel={closeDialogFooterSort}
        footerActions={['ok']}
        okHotKey=''
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='引用其他fusion组件'
        visible={cancelType}
        onOk={handleOk1}
        onCancel={closeDialogCancelType}
      >
        <p>Some Content....</p>
        <OPForm
          field={field}
          configs={[
            {
              name: 'datepicker',
              label: '',
              type: 'datepicker',
              outputFormat: 'YYYYMMDD',
            },
          ]}
        />
      </OPDialog>

      <OPDialog
        title='自定义footer'
        visible={customeFooter}
        onCancel={closeDialogCustomeFooter}
        okLoading={true}
        footer={
          <OPButton hotkey='F10' onClick={handleOk}>
            自定义button
          </OPButton>
        }
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='自定义hotkey'
        visible={customeHotKey}
        onOk={handleOk}
        onCancel={closeDialogCustomHotKey}
        okLoading={true}
        okHotKey='F9'
      >
        <p>Some Content....</p>
      </OPDialog>
    </>
  );
};

ReactDOM.render(<TestDialog />, mountNode);
```

```css
.my-css {
  /* codes here */
  color: #fff;
}
```