@xme-react/dialog

弹出框 / Dialog

Dialog（弹出框）

参数	类型	备注
visible	Boolean	是否显示
closable	Boolean	是否有关闭按钮，默认true
globalScroll	Boolean	默认需要自己设置容器的高度，在容器内部滚动，设置为true后，当content的高度超出页面时，会全局滚动，默认false
maskClosable	Boolean	是否可以点击非内容区域关闭弹窗，默认true
onClose	Function	点击关闭的回调

Dialog.Modal（对话框）

参数

参数	类型	备注
visible	Boolean	是否显示
closable	Boolean	是否有关闭按钮，默认true
globalScroll	Boolean	默认需要自己设置容器的高度，在容器内部滚动，设置为true后，当content的高度超出页面时，会全局滚动，默认false
maskClosable	Boolean	是否可以点击非内容区域关闭弹窗，默认true
confirmText	String	确定按钮的文案，默认确定
cancelText	String	取消按钮的文案，默认取消
title	String	ReactNode
content	String	ReactNode
footer	Boolean	String
confirmLoading	Boolean	点击确认按钮时，是否显示loading状态，默认false
onConfirm	Function	点击确定的回调
onCancel	Function	点击取消的回调
onClose	Function	点击关闭的回调

方法

方法	类型	备注
show	Function	显示Modal，返回一个函数，调用此函数直接关闭Modal

Dialog.Notification（通知提醒框）

参数	类型	备注
body必填	String	要显示的提醒框的内容
icon	String	要显示的提醒框的icon，必须是一个icon的url地址
iconfont	String	要显示的提醒框的icon，可以传入iconfont的class来显示，比如iconfont icon-close，优先级比icon高
title	String	提醒框的title
duration	Number	duration秒后消失，如果设置为0，则永久显示，默认4000
onClose	Function	关闭时的回调
onClick	Function	点击提醒框的回调
tag	String	提醒框的唯一标示，如果传的tag与正在显示的提醒框一致，则会替换当前正在显示的提醒框的内容，duration重新计算

方法

方法	类型	备注
show	Function	显示Notification，返回一个对象，包含close方法，可以调用close函数手动关闭提醒框

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import Button from '@xm/Button'
import {Modal, Notification} from '@xm/Dialog'
import styles from './components/index.scss'

let i = 0

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      visible: false
    }

    this.modalButtonClickHandler = this.modalButtonClickHandler.bind(this)
    this.firstModalConfirmHandler = this.firstModalConfirmHandler.bind(this)
    this.firstModalCancelHandler = this.firstModalCancelHandler.bind(this)
    this.showAnotherModalByFunction = this.showAnotherModalByFunction.bind(this)

    this.notificationButtonClickHandler = this.notificationButtonClickHandler.bind(this)
  }

  showAnotherModalByFunction () {
    const close = Modal.show({
      style: {
        top: '200px',
        width: '600px'
      },
      title: '另一个modal',
      closable: true,
      // maskClosable: true,
      globalScroll: true,
      content: <div style={{height: '1000px'}}>另一个Modal的内容</div>,
      footer: true,
      confirmText: '关闭第一个Modal',
      cancelText: '关闭',
      onConfirm: () => {
        this.firstModalCancelHandler()
      },
      onCancel: () => {
        close()
      }
    })
  }

  modalButtonClickHandler () {
    this.setState({
      visible: true
    })
  }

  firstModalConfirmHandler () {
    this.showAnotherModalByFunction()
  }

  firstModalCancelHandler () {
    this.setState({
      visible: false
    })
  }

  notificationButtonClickHandler () {
    const n = Notification.show({
      title: `title${i++}`,
      body: `body${i++}`,
      duration: 3000,
      tag: Math.floor(Math.random() * 10),
      iconfont: `${styles.iconfont} ${styles['icon-close']}`,
      icon: 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D72%2C72%2C0/sign=489ae0bbdb09b3deebeab728aa825bb3/2cf5e0fe9925bc3142b4464b54df8db1ca137073.jpg',
      onClose: (data) => {
        console.log(data)
      },
      onClick: (data) => {
        console.log(data)
      }
    })

  }

  render () {
    const {visible} = this.state

    return (<div>
      <Button onClick={this.modalButtonClickHandler}>显示Modal</Button>
      <Button
        onClick={this.notificationButtonClickHandler}>显示Notification</Button>
      <Modal visible={visible} title="标题" footer closable maskClosable
             confirmText="打开一个新的Modal" onClose={this.firstModalCancelHandler}
             onConfirm={this.firstModalConfirmHandler}
             onCancel={this.firstModalCancelHandler}>
        <div>这是内容</div>
      </Modal>
    </div>)
  }
}

ReactDOM.render(<App />, document.body)