codecamp

Element-React Dialog 对话框

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

基本用法

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

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

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 组件的两个样例。

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

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

Events

事件名称 说明 回调参数
onClose Dialog 关闭的回调
onOpen Dialog 打开的回调
Element-React Steps 步骤
Element-React Tooltip 文字提示
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }