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.
60 lines
1.0 KiB
Vue
60 lines
1.0 KiB
Vue
<template>
|
|
<v-snackbar
|
|
v-model="snackbar"
|
|
timeout="-1"
|
|
>
|
|
{{ notifications }}
|
|
|
|
<!--
|
|
<template v-slot:action="{ attrs }">
|
|
<v-btn
|
|
color="pink"
|
|
text
|
|
v-bind="attrs"
|
|
@click="snackbar = false"
|
|
>
|
|
Close
|
|
</v-btn>
|
|
</template>
|
|
-->
|
|
</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>
|