Augma UI

Toast 通知

弹出消息通知

Code 代码
<template>
  <agm-button type="primary" @click="sendMessage">
    弹出消息通知
  </agm-button>
</template>

<script lang="ts" setup>
import { AgmButton, useAgmToast } from 'augma'
import pkg from '../../../package.json'

const toast = useAgmToast()

const sendMessage = () => {
  // notify({
  //   title: 'GitHub',
  //   icon: 'mdi:github',
  //   color: 'black',
  //   message: `<a href="${pkg.repository}" target="_blank">${pkg.repository}</a>`,
  //   duration: 0,
  //   showClose: true,
  // })
  // notify.success('asd')
  toast(`<a href="${pkg.repository}" target="_blank">${pkg.repository}</a>`, {
    icon: {
      iconClass: 'i-mdi-github',
    },
    timeout: 3000,
  })
}
</script>

API

参数说明类型可选值默认值
title标题string--
color颜色string--
message消息内容string--
showClose是否显示关闭按钮booleantruefalsefalse

INFO

起初我参考 Element Plus 实现了 Notification，但后来我觉得这也许并不是本组件库的目的。 重复造轮子总是没有必要的。

尽管 Augma 虽然需要这个功能，但是更主要的目的是想要一个适配对应 UI 的 notification。

因此完全可以使用现有的 notification 组件进行 UI 层面上的改造和 API 封装简化。

Augma 由 Vue3 构建，因此我打算基于 vue-toastification 实现。

this.$notify({
  title: "GitHub",
  icon: mdiGithub,
  color: "black",
  message: `<a href="${pkg.repository}" target="_blank">${pkg.repository}</a>`,
  duration: 0,
});