ttk-app-core/src/apps/app-demo/modal/message-demo/app.js

@ttk/recat enterprise develop framework

import React, { useEffect, useCallback, useState } from 'react'
import { Button, message } from 'antd'
import "./style.less"
message.config({
  maxCount: 3,
  top: 100,
})
export default React.memo(Page)
function Page(props) {

  const onClickMethod = useCallback((value) => {
    let duration = 3
    let content = `${value} message`
    if (value === "open") {
      // 异步关闭
      duration = 0
      content = <Button onClick={onClickCloseMessage}>点击关闭全部message</Button>
    }
    message[value]({
      content: content,
      duration: duration,
      maxCount: 3,
      maskClosable: true,
      onClose: () => {
        console.log('message close')
      },
    })
  })

  const onClickCloseMessage = useCallback(() => {
    // 只支持全部关闭
    message.destroy()
  })

  return (
    <div className="modal-demo" style={{padding: '20px'}}>
      <div>
        <Button onClick={() => onClickMethod('info')}>info</Button>
        <Button onClick={() => onClickMethod('success')} type="primary">success</Button>
        <Button onClick={() => onClickMethod('error')} type="danger">error</Button>
        <Button onClick={() => onClickMethod('warning')} type="primary">warning</Button>
        <Button onClick={() => onClickMethod('loading')} type="primary">loading</Button>
        <Button onClick={() => onClickMethod('open')}>异步关闭message</Button>
      </div>
    </div>
  )
}