• Vant React

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。

函数调用

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

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

function ImperativeToast() {
  return (
    <>
      <Toast id="toast" />
      <Cell
        title="函数调用"
        clickable
        rightIcon={<ArrowRight />}
        onClick={() => Toast.open("文字提示")}
      />
    </>
  )
}

组件调用

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

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

  return (
    <>
      <Toast open={open} onClose={setOpen}>文字提示</Toast>
      <Cell title="基础用法" clickable onClick={() => setOpen(true)} />
    </>
  )
}

代码演示

文字提示

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

function TextToast() {
  return (
    <>
      <Toast id="toast" />
      <Cell
        clickable
        title="文字提示"
        rightIcon={<ArrowRight />}
        onClick={() => Toast.open("文字提示")}
      />
    </>
  )
}

加载提示

使用 type="loading" 方法展示加载提示。

<Toast open type="loading">加载中...</Toast>

成功/失败提示

使用 type="success" 展示成功提示,使用 type="fail" 展示失败提示。

<Toast open type="success">成功文案</Toast>
<Toast open type="fail">失败文案</Toast>

自定义图标

通过 icon 选项可以自定义图标,支持传入图标名称或图片链接。

<Toast open icon={<LikeOutlined />}>自定义图标</Toast>
<Toast open icon={<Image style={{ width: "1em", height: "1em" }}
                         src="https://img01.yzcdn.cn/vant/logo.png" />}>
  自定义图片
</Toast>
<Toast open icon={<Loading />}>加载中...</Toast>

自定义位置

Toast 默认渲染在屏幕正中位置,通过 position 属性可以控制 Toast 展示的位置。

<Toast open position="top">顶部展示</Toast>
<Toast open position="bottom">底部展示</Toast>

API

Props

参数 说明 类型 默认值
defaultOpen 默认是否显示弹出层 boolean false
open 是否显示弹出层 boolean false
type 提示类型,可选值为 loading success
fail html
string text
icon 自定义图标,支持传入图标名称或图片链接 ReactNode -
position 弹出位置,可选值为 top bottom string center
duration 动画时长,单位毫秒 number | string 300
backdrop 是否显示遮罩层 boolean false
children 文本内容 ReactNode -
onClose 关闭时的回调函数 (open : boolean) => void -

Options

参数 说明 类型 默认值
selector 自定义节点选择器 string toast
type 提示类型,可选值为 loading success
fail html
string text
icon 自定义图标,支持传入图标图片 ReactNode -
position 弹出位置,可选值为 top bottom string center
duration 动画时长,单位毫秒 number | string 300
backdrop 是否显示遮罩层 boolean false
message 文本内容 ReactNode -
onClose 关闭时的回调函数 (open : boolean) => void -

方法

方法名 参数 返回值 介绍
Toast.open options | message - 展示提示
Toast.loading options | message - 展示加载提示
Toast.success options | message - 展示成功提示
Toast.fail options | message - 展示失败提示

主题定制

样式变量

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

名称 默认值 描述
—toast-width 88px * $hd -
—toast-width 88px * $hd -
—toast-min-height 88px * $hd -
—toast-max-width 70% -
—toast-padding var(—padding-md) -
—toast-font-size var(—font-size-md) -
—toast-line-height var(—line-height-md) -
—toast-color var(—white) -
—toast-background-color rgba(var(—black-rgb), $alpha: 0.7) -
—toast-border-radius var(—border-radius-lg) -
—toast-transition-duration var(—animation-duration-fast) -
—toast-icon-font-size 36px * $hd -
—toast-icon-color var(—white) -
—toast-loading-padding 3px * $hd -
—toast-loading-color var(—white) -
—toast-text-min-width 96px * $hd -
—toast-text-padding var(—padding-xs) var(—padding-sm) -
—toast-position-distance 20% -
—toast-position-top-distance var(—toast-position-distance) -
—toast-position-bottom-distance var(—toast-position-distance) -