Element-React Dialog 对话框

在保留当前页面状态的情况下,告知用户并承载相关操作。

基本用法

Dialog 弹出一个对话框,适合需要定制性更大的场景。

需要设置visible属性,它接收Boolean,当为true时显示 Dialog。Dialog 分为两个部分:Dialog.BodyDialog.Footertitle属性用于定义标题,它是可选的,默认值为空。

Element-React Dialog 对话框

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>
  )
}

自定义内容

Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。

Element-React Dialog 对话框

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: 上海市普陀区金沙江路 1518 弄
    }, {
      date: 2016-05-04,
      name: 王小虎,
      address: 上海市普陀区金沙江路 1517 弄
    }, {
      date: 2016-05-01,
      name: 王小虎,
      address: 上海市普陀区金沙江路 1519 弄
    }, {
      date: 2016-05-03,
      name: 王小虎,
      address: 上海市普陀区金沙江路 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="活动区域" labelWidth="120">
              <Select value={this.state.form.region} placeholder="请选择活动区域">
                <Select.Option label="区域一" value="shanghai"></Select.Option>
                <Select.Option label="区域二" 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

参数说明类型可选值默认值
titleDialog 的标题string
sizeDialog 的大小stringtiny/small/large/fullsmall
topDialog CSS 中的 top 值(仅在 size 不为 full 时有效)string15%
modal是否需要遮罩层booleantrue
lockScroll是否在 Dialog 出现时将 body 滚动锁定booleantrue
customClassDialog 的自定义类名string
closeOnClickModal是否可以通过点击 modal 关闭 Dialogbooleantrue
closeOnPressEscape是否可以通过按下 ESC 关闭 Dialogbooleantrue

Events

事件名称说明回调参数
onCloseDialog 关闭的回调
onOpenDialog 打开的回调

作者:terry,如若转载,请注明出处:https://www.web176.com/elementreact/19973.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2023年5月11日
下一篇 2023年5月11日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注