app-base-web/src/library/notification/index.js

web development common base package.

import React, { Component } from 'react'
import { notification, Button, List, Skeleton } from 'antd';
import './style'

const Notification = {
  open(params) {
    const loadMore = params.showLoadMore ?
      <div className="notification-loadmore">
        <Button className="btn-add" onClick={params.onLoadMore}>加载更多</Button>
      </div> : "";
    notification.open({
      message: <div>{params.title}</div>,
      duration: params.duration,
      key: params.key ? params.key : 'onlyKey', //默认唯一key，设置key的作用是第二次打开时仍是当前弹框,
      placement: 'bottomRight',
      description: <div className="notification">
        <audio controls="controls" style={{ height: 0, display: 'none' }} src="../static/wav/message.wav" autoPlay></audio>
        <List
          size="small"
          style={{ border: 'none' }}
          bordered
          dataSource={params.data}
          loadMore={loadMore}
          renderItem={item => (
            <List.Item className={item.hasRead ? 'item read' : 'item'}>
              <Skeleton title={false} paragraph={{ 'rows': 1, 'width': '100' }} loading={item.loading}>
                {/* <div className="type">{item.msgType}</div> */}
                <div className="content">{item.content}</div>
                <div className="time">{item.time}</div>
              </Skeleton>
            </List.Item>
          )}
        />
      </div>,
      ...params
    })
  }
}

export default Notification