add property "icon" to Message.vue to display a custom icon

pull/1722/head
a.langner 2021-11-03 13:18:51 +01:00
parent 24f19057cf
commit 10f3139875
3 changed files with 16 additions and 3 deletions

View File

@ -36,7 +36,11 @@ export default {
life: { life: {
type: Number, type: Number,
default: 3000 default: 3000
} },
icon: {
type: String,
default: null
},
}, },
timeout: null, timeout: null,
data() { data() {
@ -62,7 +66,7 @@ export default {
return 'p-message p-component p-message-' + this.severity; return 'p-message p-component p-message-' + this.severity;
}, },
iconClass() { iconClass() {
return ['p-message-icon pi', { return ['p-message-icon pi', this.icon ? this.icon : {
'pi-info-circle': this.severity === 'info', 'pi-info-circle': this.severity === 'info',
'pi-check': this.severity === 'success', 'pi-check': this.severity === 'success',
'pi-exclamation-triangle': this.severity === 'warn', 'pi-exclamation-triangle': this.severity === 'warn',

View File

@ -16,6 +16,9 @@
<Message severity="warn">Warning Message Content</Message> <Message severity="warn">Warning Message Content</Message>
<Message severity="error">Error Message Content</Message> <Message severity="error">Error Message Content</Message>
<h5>Custom Icon</h5>
<Message severity="info" icon="pi-send">Info Message Content</Message>
<h5>Dynamic</h5> <h5>Dynamic</h5>
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<transition-group name="p-message" tag="div"> <transition-group name="p-message" tag="div">

View File

@ -113,6 +113,12 @@ import InlineMessage from 'primevue/inlinemessage';
<td>number</td> <td>number</td>
<td>3000</td> <td>3000</td>
<td>Delay in milliseconds to close the message automatically.</td> <td>Delay in milliseconds to close the message automatically.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Display a custom icon for the message.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>