DataOps-web/src/components/Common/snackbar.vue

<template>
    <v-snackbar
        v-model="visibility"
        :color="color"
        :timeout="time"
        height="50"
        :style="`top: ${top}px; z-index: var(--zIndex-snackbar)`"
        centered
        top
        text
    >
        <v-icon :color="color">{{ icon }}</v-icon>
        {{ text }}
        <template v-slot:action="{ attrs }">
          <v-btn
              icon
              color="indigo"
              v-bind="attrs"
              @click="visibility = false"
            >
              <v-icon>mdi-close</v-icon>
            </v-btn>
          <!-- <v-icon :color="white" v-bind="attrs" class="mr-2" @click="visibility = false"> mdi-close </v-icon> -->
          <!-- <v-btn
            color="blue"
            text
            v-bind="attrs"
            @click="visibility = false"
          >
            Close
          </v-btn> -->
        </template>
    </v-snackbar>
</template>

<script>
export default {
  name: 'snackBar',
  data () {
    return {
      top: 0,
      color: 'success',
      visibility: false,
      text: '',
      time: 5000,
      icon: 'mdi-check-circle'
    }
  },
  methods: {
    info (text) {
      this.visibility = false
      this.icon = 'mdi-information-slab-circle-outline'
      this.color = '#2196F3'
      this.text = text
      this.visibility = true
    },
    error (text) {
      this.visibility = false
      // setTimeout(() => {
      this.icon = 'mdi-alert-circle'
      this.color = '#F44336'
      this.text = text
      this.visibility = true
      // }, 50)
    },
    warning (text) {
      this.visibility = false
      this.icon = 'mdi-alert'
      this.color = '#FFC107'
      this.text = text
      this.visibility = true
    },
    success (text) {
      this.visibility = false
      this.icon = 'mdi-check-circle'
      this.color = '#4CAF50'
      this.text = text
      this.visibility = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>