60 lines
1.7 KiB
Vue
60 lines
1.7 KiB
Vue
<template>
|
|
<div class="show" style="max-width: 500px;">
|
|
<component :is="dynamicComponent" v-bind="vbind" @close="$emit('close')"></component>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { defineAsyncComponent } from 'vue';
|
|
import { useStore } from '~/stores/index'
|
|
const store = useStore()
|
|
var props = defineProps({
|
|
component: String,
|
|
width: Number,
|
|
height: Number,
|
|
vbind: Object,
|
|
title: String
|
|
})
|
|
const dynamicComponent = defineAsyncComponent(() => import(`~/components/snackbar/Info.vue`))
|
|
setTimeout(()=>store.commit('snackbar', undefined), 3900)
|
|
</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 3.5s;
|
|
animation: fadein 0.5s, fadeout 0.5s 3.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> |