• 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>

通知颜色

预设 primary、success、warning、danger 四种通知颜色，默认为 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 -

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—notify-color var(—white) -
—notify-padding var(—padding-xs) var(—padding-md) -
—notify-font-size var(—font-size-md) -
—notify-line-height var(—line-height-md) -
—notify-primary-background-color var(—primary-color) -
—notify-success-background-color var(—success-color) -
—notify-warning-background-color var(—warning-color) -
—notify-danger-background-color var(—danger-color) -