<template>
|
<el-col :span="fieldSpan" class="pam-field"
|
v-if="fieldDisplayDevice === 'ALL'
|
|| fieldDisplayDevice === currentDevice">
|
<div class="pam-field__label">
|
<div class="pam-field__title" :style="{ 'font-size': fieldLabelSize }"><i :class="fieldIcon"></i>{{ fieldLabel }}</div>
|
</div>
|
<p class="pam-field__content">
|
<slot></slot>
|
</p>
|
</el-col>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
import UtilsService from '~/shared/services/utils.service';
|
|
@Component
|
export default class UiField extends Vue {
|
|
@Prop()
|
span!: number;
|
|
@Prop()
|
icon!: string;
|
|
@Prop()
|
label!: string;
|
|
@Prop()
|
content!: string;
|
|
@Prop()
|
labelSize?: number;
|
|
@Prop()
|
displayDevice!: 'MOBILE' | 'DESKTOP' | 'ALL';
|
|
currentDevice: 'MOBILE' | 'DESKTOP' = 'MOBILE';
|
|
//////////////////////////////////////////////////////////////////
|
|
mounted(): void {
|
this.currentDevice = UtilsService.isMobileDevice() ? 'MOBILE' : 'DESKTOP';
|
}
|
|
get fieldSpan(): number {
|
return this.span || 24;
|
}
|
|
get fieldIcon(): string {
|
return `pam-icon icon-${this.icon}`;
|
}
|
|
get fieldLabel(): string {
|
return `${this.label}`;
|
}
|
|
get fieldDisplayDevice(): 'MOBILE' | 'DESKTOP' | 'ALL' {
|
return this.displayDevice || 'ALL';
|
}
|
|
get fieldLabelSize(): string {
|
return (this.labelSize || 16) + 'px';
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-field {
|
display : flex;
|
flex-direction: column;
|
.pam-field__label {
|
align-items: center;
|
display : flex;
|
.pam-icon {
|
font-size: 12px;
|
}
|
.pam-field__title {
|
align-items: center;
|
display : flex;
|
font-weight: bold;
|
}
|
}
|
.pam-field__content {
|
display : flex;
|
// padding-top: 10px;
|
white-space: pre-line;
|
line-height: 1.5;
|
}
|
}
|
</style>
|
