• Vant React

Notify 消息提示

介绍

在页面顶部展示消息提示,支持函数调用和组件调用两种方式。

函数调用

由于小程序不支持 DOM 操作,因此需要手动在页面(page)里挂载一个 Notify 组件并指定 id 为 notify

import { Cell, Notify } from "@taroify/core"

function ImperativeNotify() {
  return (
    <>
      <Notify id="notify" />
      <Cell
        title="函数调用"
        clickable
        rightIcon={<ArrowRight />}
        onClick={() => Notify.open("通知内容")}
      />
    </>
  )
}

组件调用

import { Cell, Notify } from "@taroify/core"

function BasicNotify() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Notify open={open} onClose={setOpen}>通知内容</Notify>
      <Cell title="基础用法" clickable onClick={() => setOpen(true)} />
    </>
  )
}

代码演示

基础用法

<Notify id="notify" open>通知内容</Notify>

通知颜色

预设 primarysuccesswarningdanger 四种通知颜色,默认为 danger

<Notify open color="primary">通知内容</Notify>
<Notify open color="success">通知内容</Notify>
<Notify open color="danger">通知内容</Notify>
<Notify open color="warning">通知内容</Notify>

自定义通知

自定义消息通知的颜色和展示时长。

<Notify open style={{ color: "#ad0000", background: "#ffe1e1" }}>自定义颜色</Notify>
<Notify open duration={1000}>自定义时长</Notify>

API

Props

参数 说明 类型 默认值
className 自定义类名 string -
style 组件样式 CSSProperties -
defaultOpen 默认是否显示消息提示 boolean -
open 是否显示消息提示 boolean -
color 类型,可选值为 primary success warning string danger
duration 展示时长(ms),值为 0 时,notify 不会消失 number 3000
children 展示文案,支持通过\n换行 ReactNode -
onClose 关闭时的回调函数 (open : boolean) => void -

Options

参数 说明 类型 默认值
selector 自定义节点选择器 string notify
className 自定义类名 string -
style 组件样式 CSSProperties -
color 类型,可选值为 primary success warning string danger
duration 展示时长(ms),值为 0 时,notify 不会消失 number 3000
message 展示文案,支持通过\n换行 ReactNode -
onClose 关闭时的回调函数 (open : boolean) => void -