Shinemo-dialog NPM

弹出框 / 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	ReactNode	是否显示底部操作区域，默认`true` 可以传入`ReactNode`自定义底部
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)

shinemo-button classnames console-polyfill es3ify-webpack-plugin es5-shim export-from-ie8 normalize.css react react-dom

2.0.1

3 years ago

2.0.0

3 years ago