Vuetify 全局注入 Snackbar

Vuetify About 1,157 words

App.vue

App.vue中全局定义v-snackbar,并且使用provide对全局提供自己封装的successerror方法。

<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,然后使用successerror等提供的方法。

<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>
Views: 346 · Posted: 2024-02-16

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓
Today On History
Browsing Refresh