Toast 通知

为操作结果与提醒提供轻量、可关闭的反馈。

基础用法

交互预览

查看 Vue 源码

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmToast } from 'augma'
import { computed, nextTick, shallowRef } from 'vue'

const messages = {
  success: { title: '设置已保存', description: '新的显示偏好已生效。' },
  warning: { title: '电量较低', description: '请连接电源后继续使用。' },
  danger: { title: '同步未完成', description: '请检查网络连接后重试。' },
  neutral: { title: '预览模式', description: '当前操作只影响本地示例。' },
}
const open = shallowRef(false)
const tone = shallowRef<keyof typeof messages>('success')
const message = computed(() => messages[tone.value])

async function show(nextTone: keyof typeof messages) {
  open.value = false
  await nextTick()
  tone.value = nextTone
  open.value = true
}
</script>

<template>
  <div class="example-row">
    <AgmButton @click="show('success')">保存设置</AgmButton>
    <AgmButton variant="outline" @click="show('warning')">显示提醒</AgmButton>
    <AgmButton variant="outline" @click="show('danger')">模拟失败</AgmButton>
    <AgmButton variant="ghost" @click="show('neutral')">显示消息</AgmButton>
    <AgmToast v-model:open="open" :tone="tone" :title="message.title" :description="message.description" />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
</style>

API

属性	类型	默认值	说明
tone	'success' | 'warning' | 'danger' | 'neutral'	'success'	状态语义；标题应同时说明结果，不能只依赖颜色
open	boolean	false	通过 v-model:open 更新
title	string	必填	通知标题
description	string	undefined	补充内容
duration	number	5000	自动关闭时间（毫秒）
closeLabel	string	'关闭通知'	关闭按钮的可访问名称
regionLabel	string	'通知（F8）'	通知区域的可访问名称，应说明 F8 快捷键

事件

• update:open(boolean)

键盘操作与使用边界

F8 聚焦通知区域，Escape 或关闭按钮关闭。悬停或聚焦时暂停倒计时。每个应用建议放置一个 AgmToast。

安装

import { AgmToast } from 'augma'
import 'augma/style.css'

复制可编辑源码：

pnpm dlx [email protected] add https://augma.yyj.moe/r/toast.json