diff --git a/src/App.vue b/src/App.vue index a076bd7b0..633046367 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,6 +8,9 @@ + + + diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue index cb04bbe7c..eb6c81a01 100644 --- a/src/components/toast/Toast.vue +++ b/src/components/toast/Toast.vue @@ -12,6 +12,7 @@ var messageIdx = 0; export default { props: { + group: String, position: { type: String, default: 'topright' @@ -23,7 +24,19 @@ export default { } }, mounted() { - ToastEventBus.$on('add', (message) => this.add(message)); + ToastEventBus.$on('add', (message) => { + if (this.group == message.group) { + this.add(message); + } + }); + ToastEventBus.$on('remove-group', (group) => { + if (this.group === group) { + this.messages = []; + } + }); + ToastEventBus.$on('remove-all-groups', () => { + this.messages = []; + }); }, methods: { add(message) { diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue index 966d4797b..d8b0a8908 100644 --- a/src/components/toast/ToastMessage.vue +++ b/src/components/toast/ToastMessage.vue @@ -21,7 +21,11 @@ export default { message: null }, mounted() { - + if (this.message.life) { + setTimeout(() => { + this.close(); + }, this.message.life) + } }, methods: { close() { diff --git a/src/components/toast/ToastService.js b/src/components/toast/ToastService.js index a44f00a10..7d59efa4f 100644 --- a/src/components/toast/ToastService.js +++ b/src/components/toast/ToastService.js @@ -6,6 +6,12 @@ const ToastService = { Vue.prototype.$toast = { add: (message) => { ToastEventBus.$emit('add', message); + }, + removeGroup: (group) => { + ToastEventBus.$emit('remove-group', group); + }, + removeAllGroups: () => { + ToastEventBus.$emit('remove-all-groups'); } } } diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue index 452d5758d..878be9a2c 100644 --- a/src/views/toast/ToastDemo.vue +++ b/src/views/toast/ToastDemo.vue @@ -23,6 +23,32 @@