Toast 提示是对用户的操作做出及时反馈，由用户的操作触发，反馈信息可以是操作的结果状态，如成功、失败、出错、警告等。
- 操作反馈提示，如成功、失败、警告等。
- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
- 与 Notification 的区别：Toast 更轻量、更简洁，通常不包含标题，仅显示一行内容。
import { ToastContainer, useToast } from "@reglow/reui";
useToast() 返回一个 API 对象，包含 info、success、error、warning、close、destroyAll 等方法。
ToastContainer 是渲染提示的容器组件，需在应用根组件挂载一次。
<script setup>
import { ToastContainer, useToast } from "@reglow/reui";
const toast = useToast();
</script>
<template>
<ToastContainer />
<Button @click="toast.info('Hi, Bytedance dance dance')">显示提示</Button>
</template>
包括成功、失败、警告。
<script setup>
const toast = useToast();
</script>
<template>
<ToastContainer />
<Button @click="toast.success('操作成功')">Success</Button>
<Button @click="toast.warning('警告信息')">Warning</Button>
<Button @click="toast.error('操作失败')">Error</Button>
</template>
使用 theme: 'light' 设置浅色填充样式。
<script setup>
const toast = useToast();
</script>
<template>
<ToastContainer />
<Button @click="toast.info({ content: '提示', theme: 'light' })">Info</Button>
<Button @click="toast.success({ content: '成功', theme: 'light' })">Success</Button>
<Button @click="toast.warning({ content: '警告', theme: 'light' })">Warning</Button>
<Button @click="toast.error({ content: '错误', theme: 'light' })">Error</Button>
</template>
自定义时长 10s，默认时长为 3s。设为 0 时不自动关闭。
<script setup>
const toast = useToast();
</script>
<template>
<ToastContainer />
<Button @click="toast.info({ content: '10秒后关闭', duration: 10 })">
Close After 10s
</Button>
</template>
当 duration 设置为 0 时，toast 不会自动关闭，需要通过 close 手动关闭。
<script setup>
import { ref } from "vue";
const toast = useToast();
const toastId = ref("");
function show() {
toastId.value = toast.info({ content: "Not auto close", duration: 0 });
}
function hide() {
toast.close(toastId.value);
toastId.value = "";
}
</script>
<template>
<ToastContainer />
<Button @click="show">Show Toast</Button>
<Button @click="hide" :disabled="!toastId">Hide Toast</Button>
</template>
通过唯一的 id 来更新已有 toast 的内容。
<script setup>
const toast = useToast();
function show() {
const id = "toastid";
toast.info({ content: "Loading...", id });
setTimeout(() => {
toast.success({ content: "Done!", id });
}, 1000);
}
</script>
<template>
<ToastContainer />
<Button @click="show">Update Content By Id</Button>
</template>
<script setup>
import { h } from "vue";
import { BellRing } from "lucide-vue-next";
const toast = useToast();
</script>
<template>
<ToastContainer />
<Button @click="toast.info({ content: '自定义图标', icon: h(BellRing) })">
Custom Icon
</Button>
</template>
通过 showClose 控制是否显示关闭按钮。
<template>
<ToastContainer />
<Button @click="toast.info({ content: '无关闭按钮', showClose: false })">
No Close Button
</Button>
</template>
<script setup>
const toast = useToast();
</script>
<template>
<ToastContainer />
<Button @click="toast.destroyAll()">Destroy All</Button>
</template>
通过 config 方法设置全局配置。
const toast = useToast();
toast.config({
duration: 5, // 默认自动关闭延时 5 秒
top: 100, // 距离顶部 100px
zIndex: 2000, // z-index
theme: "light", // 默认浅色样式
});
返回 ToastAPI 对象。
| 方法 | 说明 | 参数 |
|---|
open(options) | 打开提示 | ToastOptions & { type?: ToastType } |
info(options | string) | 信息提示 | ToastOptions | string |
success(options | string) | 成功提示 | ToastOptions | string |
error(options | string) | 错误提示 | ToastOptions | string |
warning(options | string) | 警告提示 | ToastOptions | string |
close(id) | 手动关闭指定提示 | string |
destroyAll() | 销毁所有提示 | - |
config(options) | 全局配置 | { duration?, top?, zIndex?, theme? } |
所有方法返回 toastId，可用于手动关闭。
| 参数 | 说明 | 类型 | 默认值 |
|---|
| id | 自定义 ToastId（用于更新） | string | 自动生成 |
| content | 提示内容 | string | "" |
| duration | 自动关闭延时（秒），设为 0 不自动关闭 | number | 3 |
| icon | 自定义图标 | VNode | - |
| showClose | 是否显示关闭按钮 | boolean | true |
| theme | 填充样式 | light | normal | normal |
| textMaxWidth | 内容最大宽度 | number | string | 450 |
| onClose | 关闭回调 | () => void | - |
| onClick | 点击回调 | () => void | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|
| duration | 默认自动关闭延时 | number | 3 |
| top | 距离顶部位置 (px) | number | 24 |
| zIndex | z-index | number | 1010 |
| theme | 默认填充样式 | light | normal | normal |
type ToastType = "info" | "success" | "warning" | "error";
| theme | 说明 |
|---|
normal | 白色背景，适合浅色界面 |
light | 彩色浅色填充，不同类型有不同的背景色 |
