Toast 通知

对已完成的操作给出轻量、可关闭的反馈。

基础用法

查看 Vue 源码

Vue · TypeScript

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

const open = shallowRef(false)
</script>

<template>
  <div>
    <AgmButton @click="open = true">保存设置</AgmButton>
    <AgmToast
      v-model:open="open"
      title="设置已保存"
      description="新的显示偏好已生效。"
    />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

属性	类型	默认值	说明
open	boolean	false	通过 v-model:open 更新
title	string	必填	通知标题
description	string	undefined	补充内容
duration	number	5000	自动关闭时间（毫秒）

事件

• update:open(boolean)

键盘操作与使用边界

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

安装

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