bootstrapvue
<template>
<div class="notifications">
<transition-group :name="transitionName"
:mode="transitionMode">
<notification
v-for="notification in notifications"
v-bind="notification"
:clickHandler="notification.onClick"
:key="notification.timestamp.getTime()"
@close="removeNotification">
</notification>
</transition-group>
</div>
</template>
import Notification from './Notification.vue';
export default {
components: {
Notification
},
props: {
transitionName: {
type: String,
default: 'list'
},
transitionMode: {
type: String,
default: 'in-out'
},
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>
<style lang="scss">
.notifications {
.list-move {
transition: transform 0.3s, opacity 0.4s;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active {
transition: transform 0.2s ease-in, opacity 0.4s ease-in;
}
.list-leave-active {
transition: transform 1s ease-out, opacity 0.4s ease-out;
}
.list-enter {
opacity: 0;
transform: scale(1.1);
}
.list-leave-to {
opacity: 0;
transform: scale(1.2, 0.7);
}
}
</style>
v-for
v-bind