开发预览更新于 2026-05-10

Toast 通知

全局通知 —— imperative API + 一次挂载的 Toaster，5 种语义、6 个位置。

基础用法

在应用根布局挂一次 <CfToaster />，然后在任何地方调用 toast() 即可。底层是一个框架无关的 pub-sub store，组件订阅后渲染队列。每条默认 4s 后自动关闭。

<script setup lang="ts">
import { CfButton, CfToaster, toast } from '@chufix-design/vue';
</script>

<template>
<CfButton @click="toast({ title: '操作成功', description: '配置已保存。' })">
  弹一条 Toast
</CfButton>
<CfToaster />
</template>

import { CfButton, CfToaster, toast } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfButton onClick={() => toast({ title: '操作成功', description: '配置已保存。' })}>
      弹一条 Toast
    </CfButton>
    <CfToaster />
  </>
);
}

五种语义

toast() 默认无图标。success / error / warning / info 各自带不同颜色的圆形图标。input 接收字符串或对象 { title, description, duration, dismissible }。

toast('默认通知');
toast.success('保存成功');
toast.error('保存失败');
toast.warning('磁盘空间不足');
toast.info('已复制到剪贴板');

toast('默认通知');
toast.success('保存成功');
toast.error('保存失败');
toast.warning('磁盘空间不足');
toast.info('已复制到剪贴板');

6 个位置

<CfToaster position="..." /> 控制堆栈出现的位置。常见的是 top-right（默认），手机端推荐 bottom-center。

<CfToaster position="top-right" />
<CfToaster position="bottom-center" />

<CfToaster position="top-right" />
<CfToaster position="bottom-center" />

API

`toast(input)` 与衍生方法

interface ToastInput {
  type?: 'default' | 'success' | 'error' | 'warning' | 'info';
  title?: string;
  description?: string;
  duration?: number;     // 毫秒，默认 4000；<= 0 表示不自动关闭
  dismissible?: boolean; // 是否显示关闭按钮，默认 true
}

方法	等价于
`toast(x)`	默认类型
`toast.success(x)`	`toast({ ...x, type: 'success' })`
`toast.error(x)`	`toast({ ...x, type: 'error' })`
`toast.warning(x)`	`toast({ ...x, type: 'warning' })`
`toast.info(x)`	`toast({ ...x, type: 'info' })`
`toast.dismiss(id)`	关闭单个 Toast（返回值为 `id`）
`toast.clear()`	清空所有 Toast

`<CfToaster />` Props

名称	类型	默认值	说明
`position`	`'top-right' \| 'top-left' \| 'top-center' \| 'bottom-right' \| 'bottom-left' \| 'bottom-center'`	`'top-right'`	渲染位置

Toaster 只挂一次：放在应用根布局即可，多挂会出现重复显示。