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