77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="show" style="max-width: 500px;">
|
|
<component :is="compobj" v-bind="vbind" @close="$emit('close')"></component>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['component', 'width', 'height', 'vbind', 'title'],
|
|
data() {
|
|
return {
|
|
timer: undefined
|
|
}
|
|
},
|
|
mounted() {
|
|
setTimeout(()=>this.snackbar = undefined, 2900)
|
|
},
|
|
computed: {
|
|
snackbar: {
|
|
get: function() {return this.$store.state['snackbar']},
|
|
set: function(val) {this.$store.commit('updateStore', {name: 'snackbar', data: val})}
|
|
},
|
|
compobj() {
|
|
return () => import(`@/components/${this.component}`)
|
|
}
|
|
},
|
|
methods: {
|
|
show() {
|
|
var x = document.getElementById("snackbar");
|
|
x.className = x.className.replace("show", "")
|
|
setTimeout(()=>this.snackbar = undefined, 100)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.show {
|
|
min-width: 250px; /* Set a default minimum width */
|
|
margin-left: -125px; /* Divide value of min-width by 2 */
|
|
background-color: #303030; /* Black background color */
|
|
color: white; /* White text color */
|
|
text-align: left; /* Centered text */
|
|
border-radius: 6px; /* Rounded borders */
|
|
padding: 10px; /* Padding */
|
|
position: fixed; /* Sit on top of the screen */
|
|
z-index: 999; /* Add a z-index if needed */
|
|
left: 50%; /* Center the snackbar */
|
|
top: 50px; /* 50px from the top */
|
|
visibility: visible; /* Show the snackbar */
|
|
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
|
|
However, delay the fade out process for 2.5 seconds */
|
|
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
|
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
|
}
|
|
|
|
/* Animations to fade the snackbar in and out */
|
|
@-webkit-keyframes fadein {
|
|
from {top: 0; opacity: 0;}
|
|
to {top: 50px; opacity: 1;}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {top: 0; opacity: 0;}
|
|
to {top: 50px; opacity: 1;}
|
|
}
|
|
|
|
@-webkit-keyframes fadeout {
|
|
from {top: 50px; opacity: 1;}
|
|
to {top: 0; opacity: 0;}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
from {top: 50px; opacity: 1;}
|
|
to {top: 0; opacity: 0;}
|
|
}
|
|
</style> |