如何在 Vue.js/Vuetify 中创建警报消息队列？

Question

我编写了一些代码，需要进行一些修改以适应多个警报。它还应该能够接受超时持续时间，因此默认情况下它需要为 5000，但您应该能够覆盖此属性。请有人可以帮我解决这个问题，因为我不知道从现在开始该怎么做。

~/store/toast-messages.js

export const state = () => ({
 color: '',
 message: '',
 type: ''
})

export const mutations = {
 showToast (state, payload) {
   state.color = payload.color
   state.message = payload.message
   state.type = payload.type
 }
}

~/plugins/toasts.js

export default ({ store }, inject) => {
 inject('toasts', {
  showToast ({ color = '', message = '', type = '' }) {
    store.commit('toast-messages/showToast', { color, message, type })
  }
 })
}

nuxt.config.js

export default {
  ...
  plugins: [
    '~/plugins/toasts.js'
  ],
  ...
}

~components/toasts/Toasts.vue

<template>
  <v-alert
    v-model="show"
    transition="slide-y-transition"
    :color="color"
    :type="type"
    dense
    prominent>
      {{ message }}
    </v-alert>
</template>

<script>
  export default {
    name: 'Toasts',
    data: () => {
      return {
        show: false,
        color: '',
        message: '',
        type: 'error',
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.hideToast()
      }
    },
  },
  created () {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'toast-messages/showToast') {
        this.color = state['toast-messages'].color
        this.message = state['toast-messages'].message
        this.type = state['toast-messages'].type
        this.show = true
      }
    })
  },
  methods: {
    hideToast () {
      window.setInterval(() => {
      this.show = false
    }, 3000)
  },
 },
}
</script>

在应用程序的任何地方都这样调用

this.$toasts.showToast({
  color: 'red',
  type: 'error',
  message: err.message,
})

Answer 1

您可以使用优秀的组件Vue-SNotify - 示例here。