使用vuetify实现全局v-alert消息通知

## 简介

使用强大的Vuetify开发前端页面，结果发现官方没有提供简便的全局消息通知组件（`像Element中的ElMessage那样`），所以自己动手写了一个简单的组件，效果如下：  
<img src="https://images.oldmoon.top/images/dingdangdog/dingdangdog-1708945211792.jpg" width="200px" />

> PS：如果是我没找到官方版本，请评论告诉我！下面直接上代码

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>

<!-- more -->
## 组件封装
### 全局变量：alert.ts

该文件可视为`util`文件，但我将其放在了`stores`文件夹下，主要提供了两个作用：
1. 定义`newAlert`全局变量，用于临时存储新Alert信息。
2. 定义常用的全局方法，用于快速创建`alert`，如：`successAlert`、`errorAlert`等。

```typescript
import { ref } from 'vue'

export interface AlertInfo {
  id: string,
  type: string,
  message: string
}

export const newAlert = ref<AlertInfo>({
  id: 'alert' + 0,
  type: '',
  message: ''
})

export const alert = (type: string, message: string) => {
  newAlert.value.id = Math.random().toString()
  newAlert.value.type = type
  newAlert.value.message = message
}


export const errorAlert = (message: string) => {
  alert('error', message)
}

export const successAlert = (message: string) => {
  alert('success', message)
}

export const infoAlert = (message: string) => {
  alert('info', message)
}

export const warningAlert = (message: string) => {
  alert('warning', message)
}

```


<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>

### 组件：GlobalAlert.vue

该文件是`v-alert`二次封装的组件，主要提供了以下几个功能：
1. 监听`newAlert`值的变化，当值变化时，根据当时`newAlert`更新`alertMap`；
2. 遍历`alertMap`创建多个`v-alert`；
3. 定时删除历史`v-alert`；
4. css定义`v-alert`的显示位置。

```html
<script setup lang="ts">
import { ref, watch } from 'vue'
import { type AlertInfo, newAlert } from '@/stores/alert'

// 定义 Map，存储Alert信息集合，使用Map便于删除
const alertMap = ref<Map<string, AlertInfo>>(new Map)

// 监听新Alert创建
watch(newAlert.value, () => {
  alertMap.value.set(newAlert.value.id, { ...newAlert.value })
  console.log(alertMap.value)
  deleteAlert(newAlert.value.id)
})

const deleteAlert = (id: string) => {
  console.log(id)
  setTimeout(() => {
    alertMap.value.delete(id)
  }, 3000)

}
</script>

<template>
  <div class="alert-container">
    <v-alert
      class="v-alert"
      v-for="(alert, index) in Array.from(alertMap.values())"
      :key="index"
      :type="alert.type"
      border="start"
      variant="tonal"
      closable
      close-label="Close Alert"
      :text="alert.message"
    >
    </v-alert>
  </div>
</template>

<style scoped>
.alert-container {
  position: absolute;
  top: 8%;
  right: 5%;
}

.v-alert {
  margin-top: 0.2rem !important;
}
</style>

```

## 调用测试

有了以上两个文件后，即可调用测试

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>

### 引用组件

- 要想全局显示通知，则需要在项目顶层文件中引用该组件，保证页面打开时即加载该组件即可，没有特定位置，我是在`App.vue`中引用，如下：

```html
<script setup lang="ts">
import { RouterView } from 'vue-router'
// 引用GlobalAlert
import GlobalAlert from '@/components/GlobalAlert.vue'
</script>

<template>
    <!-- 引用GlobalAlert -->
  <GlobalAlert />
  <RouterView />
</template>

<style scoped>

</style>
```


### 调用工具方法

- 组件引用后，即可在项目任意地方调用工具方法测试效果，调用方式如下：

```html
<script setup lang="ts">
// 引入封装好的工具方法
import { successAlert, errorAlert, infoAlert, warningAlert } from '@/stores/alert'
</script>

<template>
  <!-- 按钮直接调用测试 -->
  <v-btn variant="tonal"
         @click="successAlert('success')">
    success
  </v-btn>
  <v-btn variant="tonal"
         @click="errorAlert('error')">
    error
  </v-btn>
  <v-btn variant="tonal"
         @click="infoAlert('info')">
    info
  </v-btn>
  <v-btn variant="tonal"
         @click="warningAlert('warning')">
    warning
  </v-btn>
</template>

<style scoped>

</style>
```

## 可能存在的问题

1. 可能存在并发问题：没有进行并发测试；
2. 可能存在响应式问题：本示例仅在桌面端测试过，可能无法适配手机、平板等终端；

## 特别提醒

由于本人水平有限，不太会封装插件，因此采用这样简单的封装方式，本着能用就行的原则，暂时够用了，如果你的能力高超，完全可以将其拓展、封装成功能能全面的插件，感谢阅读~

相关内容：[Vuetify全局确认框的简单实现](https://www.oldmoon.top/post/431)

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>