Element-React Dialog 對話框

在保留當(dāng)前頁面狀態(tài)的情況下，告知用戶并承載相關(guān)操作。

基本用法

Dialog 彈出一個對話框，適合需要定制性更大的場景。

需要設(shè)置visible屬性，它接收Boolean，當(dāng)為true時顯示 Dialog。Dialog 分為兩個部分：Dialog.Body和Dialog.Footer。title屬性用于定義標(biāo)題，它是可選的，默認(rèn)值為空。

constructor(props) {
  super(props);


  this.state = {
    dialogVisible: false
  };
}


render() {
  return (
    <div>
      <Button type="text" onClick={ () => this.setState({ dialogVisible: true }) }>點擊打開 Dialog</Button>
      <Dialog
        title="提示"
        size="tiny"
        visible={ this.state.dialogVisible }
        onCancel={ () => this.setState({ dialogVisible: false }) }
        lockScroll={ false }
      >
        <Dialog.Body>
          <span>這是一段信息</span>
        </Dialog.Body>
        <Dialog.Footer className="dialog-footer">
          <Button onClick={ () => this.setState({ dialogVisible: false }) }>取消</Button>
          <Button type="primary" onClick={ () => this.setState({ dialogVisible: false }) }>確定</Button>
        </Dialog.Footer>
      </Dialog>
    </div>
  )
}

自定義內(nèi)容

Dialog 組件的內(nèi)容可以是任意的，甚至可以是表格或表單，下面是應(yīng)用了 Element Table 和 Form 組件的兩個樣例。

constructor(props) {
  super(props);


  this.state = {
    dialogVisible2: false,
    dialogVisible3: false,
    form: {
      name: '',
      region: ''
    }
  };


  this.table = {
    columns: [
      {
        label: "日期",
        prop: "date",
        width: 150
      },
      {
        label: "姓名",
        prop: "name",
        width: 100
      },
      {
        label: "地址",
        prop: "address"
      }
    ],
    data: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1517 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1519 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1516 弄'
    }]
  };
}


render() {
  return (
    <div>
      <Button type="text" onClick={ () => this.setState({ dialogVisible2: true }) } type="text">打開嵌套表格的 Dialog</Button>
      <Dialog
        title="收貨地址"
        visible={ this.state.dialogVisible2 }
        onCancel={ () => this.setState({ dialogVisible2: false }) }
      >
        <Dialog.Body>
          {this.state.dialogVisible2 && (
            <Table
             style={{width: '100%'}}
             stripe={true}
             columns={this.table.columns}
             data={this.table.data} />
          )}
        </Dialog.Body>
      </Dialog>
      <Button type="text" onClick={ () => this.setState({ dialogVisible3: true }) } type="text">打開嵌套表單的 Dialog</Button>
      <Dialog
        title="收貨地址"
        visible={ this.state.dialogVisible3 }
        onCancel={ () => this.setState({ dialogVisible3: false }) }
      >
        <Dialog.Body>
          <Form model={this.state.form}>
            <Form.Item label="活動名稱" labelWidth="120">
              <Input value={this.state.form.name}></Input>
            </Form.Item>
            <Form.Item label="活動區(qū)域" labelWidth="120">
              <Select value={this.state.form.region} placeholder="請選擇活動區(qū)域">
                <Select.Option label="區(qū)域一" value="shanghai"></Select.Option>
                <Select.Option label="區(qū)域二" value="beijing"></Select.Option>
              </Select>
            </Form.Item>
          </Form>
        </Dialog.Body>


        <Dialog.Footer className="dialog-footer">
          <Button onClick={ () => this.setState({ dialogVisible3: false }) }>取 消</Button>
          <Button type="primary" onClick={ () => this.setState({ dialogVisible3: false }) }>確 定</Button>
        </Dialog.Footer>
      </Dialog>
    </div>
  )
}

Attributes

Events