<template> <div aria-live="polite" :class="containerClass"> <span :class="iconClass"></span> <span class="p-inline-message-text"><slot> </slot></span> </div> </template> <script> export default { name: 'InlineMessage', props: { severity: { type: String, default: 'error' } }, timeout: null, data() { return { visible: true } }, mounted() { if (!this.sticky) { setTimeout(() => { this.visible = false; }, this.life); } }, computed: { containerClass() { return ['p-inline-message p-component p-inline-message-' + this.severity, {'p-inline-message-icon-only': !this.$slots.default}]; }, iconClass() { return ['p-inline-message-icon pi', { 'pi-info-circle': this.severity === 'info', 'pi-check': this.severity === 'success', 'pi-exclamation-triangle': this.severity === 'warn', 'pi-times-circle': this.severity === 'error' }]; } } } </script> <style> .p-inline-message { display: inline-flex; align-items: center; justify-content: center; vertical-align: top; } .p-inline-message-icon-only .p-inline-message-text { visibility: hidden; width: 0; } .p-fluid .p-inline-message { display: flex; } </style>