Message 全局提示

全局展示操作反馈信息。

前置条件

在react项目入口文件中引入样式，默认为src/main.tsx。

import 'ono-react-element/dist/style/Message.css'

基础用法

import { Button, Message } from 'ono-react-element'

function App() {
  return (
    <div style={{ width: '100%', display: 'flex', gap: 10 }}>
      <Button type="success" onClick={() => message.success('Success')}>
        Success
      </Button>
      <Button type="warning" onClick={() => message.warning('Warning')}>
        Warning
      </Button>
      <Button type="danger" onClick={() => message.error('Error')}>
        Error
      </Button>
      <Button type="info" onClick={() => message.info('Info')}>
        Info
      </Button>
    </div>
  )
}

export default App;

loading用法

import { Button, Message } from 'ono-react-element'

function App() {
  return (
    <div style={{ width: '100%' }}>
      <Button
        onClick={() => {
          message.loading({ message: 'Loading...', key: 'loading' })
          setTimeout(
            () => message.success({ message: 'Success', key: 'loading' }),
            3000
          )
        }}
      >
        Loading
      </Button>
    </div>
  )
}

export default App;

使用duration属性

import { Button, Message } from 'ono-react-element'

function App() {
  return (
    <div style={{ width: '100%' }}>
      <Button
        onClick={() =>
          message.success({
            message: 'Success',
            duration: 10000
          })
        }
      >
        Success
      </Button>
    </div>
  )
}

export default App;

使用close按钮关闭

import { Button, Message } from 'ono-react-element'

function App() {
  return (
    <div style={{ width: '100%' }}>
      <Button
        onClick={() =>
          message.success({
            message: 'Success',
            showClose: true
          })
        }
      >
        Success
      </Button>
    </div>
  )
}

export default App;

API

静态方法

• message.success(message)
• message.warning(message)
• message.error(message)
• message.info(message)
• message.loading(message)

参数	说明	类型	默认值	是否必填
message	提示内容	string|MessageParams	-	是

MessageParams

参数	说明	类型	默认值	是否必填
key	当前提示的唯一标志	string	-	否
duration	自动关闭的延时，单位毫秒。	number	3000	否
message	提示内容	ReactNode|(icon: ReactNode, closeButton?: ReactNode) => ReactNode	-	是
speed	动画速度，单位毫秒。	number	300	否
offset	偏移距离	number	20	否
showClose	显示关闭按钮	boolean	false	否
onClose	message组件关闭时回调	() => void	-	否
zIndex	层级	number	9999	否