You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
847 B
Vue
47 lines
847 B
Vue
4 years ago
|
<template>
|
||
|
<v-snackbar
|
||
|
v-model="snackbar"
|
||
|
timeout="-1"
|
||
|
>
|
||
|
{{ notifications }}
|
||
|
</v-snackbar>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import { mapState, mapMutations } from 'vuex'
|
||
|
|
||
|
export default {
|
||
|
data: () => ({
|
||
|
snackbar: false,
|
||
|
timeoutHandler: null,
|
||
|
}),
|
||
|
computed: {
|
||
|
...mapState(['notifications']),
|
||
|
},
|
||
|
watch: {
|
||
|
notifications (newVal) {
|
||
|
if (newVal !== null) {
|
||
|
this.snackbar = true
|
||
|
this.resetTimeout()
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
methods: {
|
||
|
...mapMutations(['notification']),
|
||
|
resetTimeout () {
|
||
|
clearTimeout(this.timeoutHandler)
|
||
|
|
||
|
this.timeoutHandler = setTimeout(() => {
|
||
|
this.snackbar = false
|
||
|
// clear notification
|
||
|
this.notification(null)
|
||
|
}, 3 * 1000)
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
|
||
|
</style>
|