Fixed closable and sticky features of toast

pull/12/head
cagataycivici 2019-05-26 10:04:02 +03:00
parent fe250f0ff6
commit 381197fa20
2 changed files with 11 additions and 9 deletions

View File

@ -1,7 +1,7 @@
<template>
<div :class="containerClass">
<div class="p-toast-item">
<button class="p-toast-icon-close p-link" @click="close">
<button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="closable !== false">
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>
<span :class="iconClass"></span>
@ -18,9 +18,10 @@ export default {
props: {
message: null
},
closeTimeout: null,
mounted() {
if (this.message.life) {
setTimeout(() => {
this.closeTimeout = setTimeout(() => {
this.close();
}, this.message.life)
}
@ -28,6 +29,13 @@ export default {
methods: {
close() {
this.$emit('close', this.message);
},
onCloseClick() {
if (this.closeTimeout) {
clearTimeout(this.closeTimeout);
}
this.close();
}
},
computed: {

View File

@ -66,16 +66,10 @@ this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order s
<td>true</td>
<td>Whether the message can be closed manually using the close icon.</td>
</tr>
<tr>
<td>sticky</td>
<td>element</td>
<td>null</td>
<td>When enabled, message is not removed automatically.</td>
</tr>
<tr>
<td>life</td>
<td>number</td>
<td>3000</td>
<td>null</td>
<td>Delay in milliseconds to close the message automatically.</td>
</tr>
<tr>