wikijs-fork/client/components/common/notify.vue

64 lines
1.0 KiB
Vue
Raw Normal View History

<template lang='pug'>
v-snackbar.nav-notify(
:color='notification.style'
top
multi-line
auto-height
v-model='notificationState'
)
.text-xs-left
v-icon.mr-3(dark) {{ notification.icon }}
span {{ notification.message }}
</template>
<script>
import { get, sync } from 'vuex-pathify'
export default {
data() {
return { }
},
computed: {
notification: get('notification'),
notificationState: sync('notification@isActive')
}
}
</script>
<style lang='scss'>
.nav-notify {
// top: 60px;
z-index: 999;
.v-snack__wrapper {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.v-snack__content {
position: relative;
&::after {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: rgba(255,255,255,.4);
position: absolute;
bottom: 0;
left: 0;
animation: nav-notify-anim 6s linear;
}
}
}
@keyframes nav-notify-anim {
0% {
width: 100%;
}
100% {
width: 0%;
}
}
</style>