63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
|
<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>
|