56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="notifications">
|
||
|
|
<slide-y-up-transition :duration="transitionDuration"
|
||
|
|
group
|
||
|
|
mode="out-in">
|
||
|
|
<notification
|
||
|
|
v-for="notification in notifications"
|
||
|
|
v-bind="notification"
|
||
|
|
:clickHandler="notification.onClick"
|
||
|
|
:key="notification.timestamp.getTime()"
|
||
|
|
@close="removeNotification"
|
||
|
|
>
|
||
|
|
</notification>
|
||
|
|
</slide-y-up-transition>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import Notification from './Notification.vue';
|
||
|
|
import { SlideYUpTransition } from 'vue2-transitions';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
SlideYUpTransition,
|
||
|
|
Notification
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
transitionDuration: {
|
||
|
|
type: Number,
|
||
|
|
default: 200
|
||
|
|
},
|
||
|
|
overlap: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
notifications: this.$notifications.state
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
removeNotification(timestamp) {
|
||
|
|
this.$notifications.removeNotification(timestamp);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.$notifications.settings.overlap = this.overlap;
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
overlap: function (newVal) {
|
||
|
|
this.$notifications.settings.overlap = newVal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|