94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
|
<div class="alert-wrapper">
|
|
<v-alert
|
|
class="alert"
|
|
:type="type"
|
|
v-model="showAlert"
|
|
:dismissible="true"
|
|
transition="slide-y-transition"
|
|
>
|
|
{{ text }}
|
|
<v-progress-linear
|
|
v-if="autoDismiss"
|
|
class="progress"
|
|
v-model="progressValue"
|
|
background-opacity="0"
|
|
color="rgba(0,0,0,0.3)"
|
|
></v-progress-linear>
|
|
</v-alert>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
beforeDestroy() {
|
|
this.clearTimer();
|
|
},
|
|
data() {
|
|
return {
|
|
interval: null,
|
|
progressValue: 100,
|
|
showAlert: true,
|
|
};
|
|
},
|
|
methods: {
|
|
clearTimer() {
|
|
if (this.interval !== null) {
|
|
clearInterval(this.interval);
|
|
}
|
|
},
|
|
},
|
|
updated() {
|
|
this.clearTimer();
|
|
if (this.autoDismiss) {
|
|
this.interval = setInterval(() => {
|
|
this.progressValue -= 4;
|
|
if (this.progressValue < 0) {
|
|
this.showAlert = false;
|
|
this.clearTimer();
|
|
}
|
|
}, 100);
|
|
}
|
|
},
|
|
props: {
|
|
autoDismiss: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
text: String,
|
|
onDismiss: Function,
|
|
type: String,
|
|
},
|
|
watch: {
|
|
showAlert(newAlert) {
|
|
if (!newAlert && this.onDismiss) {
|
|
this.onDismiss();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.alert-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1001;
|
|
width: 100%;
|
|
}
|
|
|
|
.alert {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 0;
|
|
width: 50%;
|
|
}
|
|
|
|
.progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|