Skip to content

Instantly share code, notes, and snippets.

@Darkside73
Created December 15, 2016 14:56
Show Gist options
  • Save Darkside73/cbaa64b9e6eff687c709edb083be8bc9 to your computer and use it in GitHub Desktop.
Save Darkside73/cbaa64b9e6eff687c709edb083be8bc9 to your computer and use it in GitHub Desktop.
Vue UI notifications
<template>
<transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutDown">
<div :class="cssClass" class="ui animated message">
<i @click="triggerClose(notification)" class="close icon"></i>
<div v-if="notification.title" class="header">{{notification.title}}</div>
<p>{{notification.text}}</p>
</div>
</transition>
</template>
<script>
export default {
props: ['notification'],
data () {
return { timer: null }
},
computed: {
cssClass () {
return this.notification.type ? this.notification.type : 'secondary'
}
},
mounted () {
let timeout = this.notification.hasOwnProperty('timeout') ? this.notification.timeout : true
if (timeout) {
let delay = this.notification.delay || 3000
this.timer = setTimeout(() => {
this.triggerClose(this.notification)
}, delay)
}
},
methods: {
triggerClose (notification) {
clearTimeout(this.timer)
this.$emit('close-notification', notification)
}
}
}
</script>
<template>
<div class="ui-notifications">
<notification
v-for="notification in notifications" :notification="notification" @close-notification="remove">
</notification>
</div>
</template>
<script>
import Notification from './notifications/component'
import 'animate.css'
const NotificationStore = {
state: [],
addNotification (notification) {
this.state.push(notification)
},
removeNotification (notification) {
let index = this.state.indexOf(notification)
this.state.splice(0, 1)
}
}
export default {
props: ['message'],
components: { Notification },
data () {
return {
notifications: NotificationStore.state
}
},
mounted () {
if (this.message)
this.notifications.push(this.message)
},
methods: {
remove (notification) {
NotificationStore.removeNotification(notification)
},
add (notification) {
NotificationStore.addNotification(notification)
}
}
}
</script>
<style>
.ui-notifications {
position: fixed;
right: 10px;
top: 10px;
width: 350px;
z-index: 1000;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment