notification 消息通知

通知组件（Notification component）是一种用于向用户显示临时消息、提醒或警告的UI组件。它常用于显示应用程序的通知、成功消息、错误消息、警告或其他重要信息

Props参数

名称	类型	是否必传	默认值	描述
duration	number | null	否	4.5s	持续时间
覆盖默认的持续时间
传递null则不自动关闭
position	EToastPosition | keyof typeof EToastPosition	否	-	弹窗位置

示例

import { useRef } from 'react'
import { View, Image } from '@tarojs/components'
import PageDemoBlock from '../_components/page-demo-block'
import MMNotification from '../../components/notification'
import { IMMNotificationRef } from '../../components/notification/const'
import MMCell from '../../components/cell'
import category from './category.png'
import MMPageContainer from '../_components/page-container'

export default () => {
  const toastRef = useRef<IMMNotificationRef>(null)

  return (
    <MMPageContainer title="消息通知">
      <MMNotification ref={toastRef} />

      <PageDemoBlock title="介绍">
        <MMCell title="文字提示" arrow onClick={() => toastRef.current!.open({ title: '文字提示' })} />
        <MMCell title="带内容" arrow onClick={() => toastRef.current!.open({ title: '新消息', content: '您有一笔新的订单，请及时处理' })} />
        <MMCell title="成功提示" arrow onClick={() => toastRef.current!.success({ title: '成功了', content: '操作成功！' })} />
        <MMCell title="失败提示" arrow onClick={() => toastRef.current!.fail({ title: '失败啦' })} />
      </PageDemoBlock>

      <PageDemoBlock title="持续时间">
        <View>通知默认持续4.5s,如果设置为null则不退出</View>
        <MMCell title="手动关闭" arrow onClick={() => toastRef.current!.fail({ title: '需要手动关闭', duration: null })} />
      </PageDemoBlock>

      <PageDemoBlock title="动画模式">
        <MMCell title="淡入/淡出" arrow onClick={() => toastRef.current!.open({ title: 'fade', animationType: 'fade' })} />
        <MMCell title="滑入/滑出" arrow onClick={() => toastRef.current!.open({ title: 'slideup', animationType: 'slideup' })} />
      </PageDemoBlock>

      <PageDemoBlock title="位置">
        <MMCell title="顶部" arrow onClick={() => toastRef.current!.open({ title: 'top', position: 'top' })} />
        <MMCell title="顶部slideup" arrow onClick={() => toastRef.current!.open({ title: 'top', position: 'top', animationType: 'slideup' })} />

        <MMCell title="居中" arrow onClick={() => toastRef.current!.open({ title: 'center', position: 'center' })} />

        <MMCell title="底部" arrow onClick={() => toastRef.current!.open({ title: 'bottom', position: 'bottom' })} />
        <MMCell title="底部slideup" arrow onClick={() => toastRef.current!.open({ title: 'top', position: 'bottom', animationType: 'slideup' })} />
      </PageDemoBlock>

      <PageDemoBlock title="自定义">
        <MMCell
          title="自定义icon"
          arrow
          onClick={() =>
            toastRef.current!.open({
              icon: <Image src={category} style={{ width: 30, height: 30 }} />,
              title: '哎嘿～',
              content: '这是自定义的图标'
            })
          }
        />
      </PageDemoBlock>
    </MMPageContainer>
  )
}