menduner/src/plugins/snackbar/message.vue

<template>
  <v-app :full-height="false">
    <v-snackbar
      v-if="color === 'point'"
      style="padding-top: 40vh;"
      timeout="-1"
      location="top"
      color="#f9eddce3"
      :variant="variant || 'flat'"
      v-model="snackbar"
    >
    <div class="d-flex align-end">
      <span style="color: darkorange; font-size: 48px;" class="mdi mdi-database-check-outline ml-5 mr-2"></span>
      <div style="color: darkorange;" class="mb-3">{{message}}</div>
    </div>
    <template v-slot:actions>
          <span style="color: darkorange; font-size: 22px;" class="mdi mdi-close-circle-outline mr-5" @click="snackbar = false"></span>
        </template>
    </v-snackbar>
    <v-snackbar
      v-else
      style="position: fixed; top: 58%; transform: translateY(-50%)"
      timeout="-1"
      location="top"
      :absolute="true"
      :variant="variant || 'flat'"
      :color="color"
      v-model="snackbar"
    >
    <div class="mx-3 my-2" style="font-size: 20px; color: #fff;">{{message}}</div>
    <template v-slot:actions>
          <v-btn
            color="white"
            variant="text"
            size="large"
            class="mr-1"
            @click="snackbar = false"
          >
            关闭
          </v-btn>
        </template>
    </v-snackbar>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
defineProps({
  variant: String,
  color: String,
  message: String
})
defineOptions({ name: 'snackbar-message' })

const snackbar = ref(true)

</script>
<style scoped>

</style>