快捷導航

使用vuetify實現(xiàn)全局v-alert消息通知的方法

更新時間：2024年02月29日 15:29:31 作者：DingDangDog

使用強大的Vuetify開發(fā)前端頁面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細代碼,感興趣的朋友跟隨小編一起看看吧

簡介

使用強大的Vuetify開發(fā)前端頁面，結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件（像Element中的ElMessage那樣），所以自己動手寫了一個簡單的組件，效果如下：

PS：如果是我沒找到官方版本，請評論告訴我！下面直接上代碼

組件封裝

全局變量：alert.ts

該文件可視為util文件，但我將其放在了stores文件夾下，主要提供了兩個作用：

定義newAlert全局變量，用于臨時存儲新Alert信息。
定義常用的全局方法，用于快速創(chuàng)建alert，如：successAlert、errorAlert等。

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二次封裝的組件，主要提供了以下幾個功能：

監(jiān)聽newAlert值的變化，當值變化時，根據(jù)當時newAlert更新alertMap；
遍歷alertMap創(chuàng)建多個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)
// 監(jiān)聽新Alert創(chuàng)建
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>

調(diào)用測試

有了以上兩個文件后，即可調(diào)用測試

引用組件

要想全局顯示通知，則需要在項目頂層文件中引用該組件，我是在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>

調(diào)用工具方法

組件引用后，即可在項目任意地方調(diào)用工具方法測試效果，調(diào)用方式如下：

<script setup lang="ts">
// 引入封裝好的工具方法
import { successAlert, errorAlert, infoAlert, warningAlert } from '@/stores/alert'
</script>
<template>
  <!-- 按鈕直接調(diào)用測試 -->
  <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>