ethereum_viewer_webapp/src/plugins/kit/MsgKit.vue

<template>
  <v-snackbar top v-model="visible" :color="color" :timeout="timeout">
    <v-icon left>{{ icon }}</v-icon> {{ msg }}

    <template v-slot:action="{ attr }">
      <v-btn text v-bind="attr" @click="visible = false">关 闭</v-btn>
    </template>
  </v-snackbar>
</template>

<script>
export default {

  name: 'MsgKit',

  data: () => ({
    visible: false,

    msg: 'Hello, Friends!',

    color: 'teal',

    timeout: 2000,

    icon: 'mdi-check-circle-outline'
  }),

  methods: {
    normal (msg, color = '#2196F3', timeout = 2000, icon = 'mdi-information-outline') {
      this.visible = true
      this.msg = msg
      this.color = color
      this.timeout = timeout
      this.icon = icon
    },

    success (msg, timeout = 2000) {
      this.normal(msg, '#009688', timeout, 'mdi-check-circle-outline')
    },

    warning (msg, timeout = 2000) {
      this.normal(msg, '#673AB7', timeout, 'mdi-alert-octagram-outline')
    },

    error (msg, timeout = 2000) {
      this.normal(msg, '#C62828', timeout, 'mdi-sticker-remove-outline')
    }
  }
}
</script>