Vuetify 全局注入 Snackbar

App.vue

在App.vue中全局定义v-snackbar，并且使用provide对全局提供自己封装的success、error方法。

<template>
  <v-snackbar
    v-model="snackbar"
    :color="color"
    :timeout="timeout"
    :location="location"
  >
    {{ text }}
  </v-snackbar>
  <router-view/>
</template>

<script setup>
import {provide, ref, watch} from 'vue';

const snackbar = ref(false);
const color = ref('success');
const text = ref('');
const location = ref('top');
const timeout = ref(2000);

function success(content) {
  snackbar.value = true;
  color.value = 'success';
  text.value = content;
}

function error(content) {
  snackbar.value = true;
  color.value = 'error';
  text.value = content;
}
provide('snackbar', {success, error, location, timeout});
</script>

其他组件中使用

在其他组件中（子组件/孙组件等等都可以），使用inject注入snackbar，然后使用success、error等提供的方法。

<script setup>
import {inject} from "vue";

const snackbar = inject('snackbar');

function showToast() {
  snackbar.success('Account Snackbar');
}
</script>

<template>
  <v-container>
    <v-btn @click="showToast">
      Account
    </v-btn>
  </v-container>
</template>