# Dialog组件

![](http://p3.qhimg.com/t019c21dd38e23c0777.gif)

![](http://p6.qhimg.com/t0118a9217e783b4f6d.gif)

## 基本弹框使用方法

```javascript
import Dialog from './components/Dialog';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  toggleVisible = () => {
    this.setState({
      visible: !this.state.visible
    })
  }

  handleCancel = () => {
    this.setState({
      visible: false
    })
  }

  handleOk = () => {
    this.setState({
      visible: false
    })
  }

  render() {
    const {
      visible
    } = this.state;
    return (
      <div className="App">
        <p onClick={this.toggleVisible}>显示/隐藏Dialog</p>
        <Dialog visible={visible} title="出价设置" onCancel={this.handleCancel} onOk={this.handleOk}>
          <p>hello，world</p>
        </Dialog>
      </div>
    );
  }
}

export default App;
```
## 确认框
通常用在特殊场景，例如某些风险操作，需要告知用户会带来什么后果。
```javascript
import Dialog from './components/Dialog';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  showconfirm = () => {
    Dialog.confirm({
      title: '你确定要删除当前资源吗',
      content: '删除之后将无法恢复',
      onCancel: () => {
        console.log('cancel')
      },
      okOk: () => {
        console.log('ok')
      }
    })
  }

  render() {
    const {
      visible
    } = this.state;
    return (
      <div className="App">
        <p onClick={this.showconfirm}>confirm</p>
      </div>
    );
  }
}

export default App;
```
## 提示框
提示框分别实现了info、success、warn，通过特定的UI图标带给用户不同的信息，提高用户体验。

```javascript
import Dialog from './components/Dialog';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  showconfirm = () => {
    Dialog.confirm({
      title: '你确定要删除当前资源吗',
      content: '删除之后将无法恢复',
      okOk: () => {
        console.log('ok')
      }
    })
  }

  render() {
    const {
      visible
    } = this.state;
    return (
      <div className="App">
        <p onClick={this.showconfirm}>confirm</p>
      </div>
    );
  }
}

export default App;
```
与confirm相比，少了cancel动作，进而onCancel回调也移除了。

手动关闭dialog
```javascript
showconfirm = () => {
  this.showEdit = Dialog.edit({
    title: `您确定删除 ${this.state.selectedRowKeys.length} 个APP吗？`,
    content: '删除之后将不可恢复',
    onCancel: () => {
      console.log("cancel")
    }
  })
  document.body.onclick = () => {
    this.showEdit.close();
  }
}
```

## 属性说明
| 参数       | 说明                       | 类型    | 可选值 | 默认值 |
| ---------- | -------------------------- | ------- | ----- | ----- |
| visible    | 控制弹框是否显示的唯一属性   | Boolean  |   —   |   —  |
| title      | 弹框标题                   | String   |   —   |   —  |
| children   | 自定义弹框展示内容          | Node     |   —   |   —  |
| cancelText | 取消按钮的文字内容          | String   |   —   |  取消 |
| okText     | 确定按钮的问题内容          | String   |   —   |  确定 |
| onCancel   | 点击取消和关闭按钮触发的事件 | Function |   —   |  —   |
| onOk       | 点击确定按钮所触发的事件     | Function |  —    |  —   |
| footer     | 自定义页脚，如果不需要就用空数组 | Array |  —    |  —   |
| width      | 弹框的宽度                  | Number   |  —    |  520 |
| height     | 弹框的高度                  | Number   |  —    |  300 |
| is2dialog  | 是否二次弹窗                | Boolean   |  —    | false |