Fixed closable and sticky features of toast
parent
fe250f0ff6
commit
381197fa20
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue