• 官网：https://notivue.smastrom.io/
• Github：https://github.com/smastrom/notivue

下面放作者个人调配好的现成配置：

./src/plugins/notivue.ts

基础配置

import { createNotivue } from 'notivue'

const notivue = createNotivue({
  // 定位
  position: 'top-center',
  // 悬浮鼠标暂停
  pauseOnHover: true,
  // 触摸屏幕暂停
  pauseOnTouch: false,
  // 切换标签页暂停
  pauseOnTabChange: true,
  // 渐入动画
  transition: 'transform 1000ms ease-in-out',
  // 避免重复弹出
  avoidDuplicates: false,
  // 最大同时显示数量
  limit: 3,
  // 同时显示上限后后续进入队列
  enqueue: true,
  notifications: {
    global: {
      duration: 3000,
    },
  },
})

export default notivue

./src/plugins/index.ts

插件管理

import vuetify from './vuetify'
import notivue from './notivue'
import router from '@/router'
import pinia from '@/stores'
import i18n from '@/i18n'

import type { App } from 'vue'

export function registerPlugins(app: App) {
  app.use(vuetify).use(router).use(pinia).use(i18n).use(notivue)
}

./src/components/common/Toast.vue

样式二次封装

<template>
  <Notivue v-slot="item">
    <NotivueSwipe :item="item">
      <Notification :item="item" :theme="theme">
        <NotificationProgress :item="item" />
      </Notification>
    </NotivueSwipe>
  </Notivue>
</template>

<script lang="ts" setup>
  import {
    Notivue,
    NotivueSwipe,
    NotificationProgress,
    Notification,
    pastelTheme,
    type NotivueTheme,
  } from 'notivue'

  const theme: NotivueTheme = {
    ...pastelTheme,
  }
</script>

<style lang="scss">
  .Notivue__close::after {
    border-radius: 50%;
  }
  .Notivue__content {
    padding-bottom: 8px;
  }
  // 置于屏幕顶部层级
  :root {
    --nv-z: 9999;
  }
</style>

./src/main.ts

项目入口引入

import { createApp } from 'vue'
import { registerPlugins } from '@/plugins'
import App from '@/App.vue'
import '@/hooks/fingerprint'
import '@/api'
import 'notivue/notifications.css'
import 'notivue/animations.css'
import 'notivue/notifications-progress.css'
import '@/styles/style.scss'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')

./src/layouts/default.vue

在布局中引入二次封装好的组件

<template>
  <router-view />
  <Toast />
</template>

愉快的使用

<template>
  <v-btn @click="testMsg" />
</template>

<script lang="ts" setup>
  function testMsg() {
    push.info('示例消息')
  }
</script>