Toast 轻提示

对用户操作做出及时反馈，顶部居中显示并自动消失。比 Notification 更轻量，通常仅一行内容。

何时使用

  • 需要轻量、短暂的提示信息时。

基础用法

<script setup lang="ts">
import { ToastContainer, useToast, Button } from "@reglow/reui";

const toast = useToast();
</script>

<template>
  <ToastContainer />
  <Button @click="toast.info('这是一条提示')">显示提示</Button>
  <Button @click="toast.success('操作成功')">Success</Button>
  <Button @click="toast.warning('警告信息')">Warning</Button>
  <Button @click="toast.error('操作失败')">Error</Button>
</template>

导入

import { ToastContainer, useToast } from "@reglow/reui";

API

方法说明
toast.info(content)信息提示
toast.success(content)成功提示
toast.warning(content)警告提示
toast.error(content)错误提示
toast.close(key)关闭指定提示
toast.destroyAll()关闭全部

ToastContainer 需在应用根组件挂载一次。

Spin 加载中
用于页面和区块的加载中状态，合适的加载动效可有效缓解用户焦虑。
BackTop 回到顶部
页面内容较长时，滚动到指定高度后显示回到顶部按钮。