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

View File

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