2024-02-26
藏龙卧虎
00
请注意,本文编写于 287 天前,最后修改于 198 天前,其中某些信息可能已经过时。

目录

简介
组件封装
全局变量:alert.ts
组件:GlobalAlert.vue
调用测试
引用组件
调用工具方法
可能存在的问题
赞助请求

简介

使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件(像Element中的ElMessage那样),所以自己动手写了一个简单的组件,效果如下:

PS:如果是我没找到官方版本,请评论告诉我!下面直接上代码

组件封装

全局变量:alert.ts

该文件可视为util文件,但我将其放在了stores文件夹下,主要提供了两个作用:

  1. 定义newAlert全局变量,用于临时存储新Alert信息。
  2. 定义常用的全局方法,用于快速创建alert,如:successAlerterrorAlert等。
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) }

组件: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>

调用测试

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

引用组件

  • 要想全局显示通知,则需要在项目顶层文件中引用该组件,保证页面打开时即加载该组件即可,没有特定位置,我是在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. 可能存在响应式问题:本示例仅在桌面端测试过,可能无法适配手机、平板等终端;

赞助请求

建站不易,以下是一个广告,还请动动您的小拇指,点击一次以示鼓励,谢谢!

就目前的访问量,即便每个访客都点一次广告,收入也不足以支付运营成本,如果看不到广告,可能是网络原因或被拦截了,那就算了吧。祝你生活愉快~~

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!