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

 更新时间:2024年02月29日 15:29:31   作者:DingDangDog  
使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧

简介

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

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

组件封装

全局变量:alert.ts

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

  • 定义newAlert全局变量,用于临时存储新Alert信息。
  • 定义常用的全局方法,用于快速创建alert,如:successAlerterrorAlert等。
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二次封装的组件,主要提供了以下几个功能:

  • 监听newAlert值的变化,当值变化时,根据当时newAlert更新alertMap
  • 遍历alertMap创建多个v-alert
  • 定时删除历史v-alert
  • css定义v-alert的显示位置。
<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中引用,如下:
<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>

调用工具方法

  • 组件引用后,即可在项目任意地方调用工具方法测试效果,调用方式如下:
<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>

可能存在的问题

  • 可能存在并发问题:没有进行并发测试;
  • 可能存在响应式问题:本示例仅在桌面端测试过,可能无法适配手机、平板等终端;

参考资料

到此这篇关于使用vuetify实现全局v-alert消息通知的方法的文章就介绍到这了,更多相关vuetify 全局v-alert消息通知内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 3 使用moment设置显示时间格式的问题及解决方法

    Vue 3 使用moment设置显示时间格式的问题及解决方法

    在Vue 3中,因为过滤器(filter)已经被废弃,取而代之的是全局方法(global method),本文给大家介绍Vue 3 使用moment设置显示时间格式的问题及解决方法,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解

    Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解

    这篇文章主要介绍了Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能,结合实例形式分析了vue.js前台商品分页、排序、筛选等功能及后台node.js处理技巧,需要的朋友可以参考下
    2019-12-12
  • vue.js样式布局Flutter业务开发常用技巧

    vue.js样式布局Flutter业务开发常用技巧

    这篇文章主要为大家介绍了vue.js样式布局Flutter业务开发中的常用技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2021-11-11
  • vue 解决mintui弹窗弹起来,底部页面滚动bug问题

    vue 解决mintui弹窗弹起来,底部页面滚动bug问题

    这篇文章主要介绍了vue 解决mintui弹窗弹起来,底部页面滚动bug问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue数据更新视图未更新的几种解决方案

    Vue数据更新视图未更新的几种解决方案

    本文主要介绍在vue项目中,遇到数据更新但视图不更新的情况时,无法使用watch监听、无法使用this.$set方法,同时使用this.$forceUpdate()无效时,所使用的解决方案,需要的朋友可以参考下
    2024-02-02
  • Vue动态样式方法实例总结

    Vue动态样式方法实例总结

    在vue项目中,很多场景要求我们动态改变元素的样式,下面这篇文章主要给大家介绍了关于Vue动态样式方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue-router(this.$router)如何在新窗口打开路由跳转页面

    vue-router(this.$router)如何在新窗口打开路由跳转页面

    这篇文章主要介绍了vue-router(this.$router)如何在新窗口打开路由跳转页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue混入mixin使用特点

    vue混入mixin使用特点

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-12-12
  • VUE+Element实现增删改查的示例源码

    VUE+Element实现增删改查的示例源码

    这篇文章主要介绍了VUE+Element实现增删改查的示例源码,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • vue实现的上拉加载更多数据/分页功能示例

    vue实现的上拉加载更多数据/分页功能示例

    这篇文章主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
    2019-05-05

最新评论