File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="component-wrap flex-column justify-center">
<p class="data-caption cursor" :id="parent.layoutNm+'-MainTitle'" data-type="text" @click="optionChangeClick" :style="styleObj('-MainTitle')" >
{{ parent.componentOption[parent.layoutNm+'-MainTitle'].textData }}
</p>
<div class="flex justify-between align-center">
<div class="flex50">
<p class="data-icon cursor">
<label :for="parent.layoutNm + '-iconImg1'">
<img :src="iconPath1" >
</label>
<input type="file" :id="parent.layoutNm + '-iconImg1'" style="display:none" @change="handleIconChange">
</p>
</div>
<div class="flex50">
<p class="data-number text-rg cursor" :id="parent.layoutNm+'-Value1'" data-type="column" @click="optionChangeClick" :style="styleObj('-Value1')" >
{{ parent.componentOption[parent.layoutNm+'-Value1'].columnData }}
<span class="data-unit ml5 point-none" :style="styleObj('-Value1')">
{{ parent.componentOption[parent.layoutNm+'-Value1'].unitData }}
</span>
</p>
</div>
</div>
<div class="flex justify-between align-center">
<div class="flex50">
<p class="data-icon cursor">
<label :for="parent.layoutNm + '-iconImg2'">
<img :src="iconPath2" >
</label>
<input type="file" :id="parent.layoutNm + '-iconImg2'" style="display:none" @change="handleIconChange">
</p>
</div>
<div class="flex50">
<p class="data-number text-rg cursor" :id="parent.layoutNm+'-Value2'" data-type="column" @click="optionChangeClick" :style="styleObj('-Value2')">
{{ parent.componentOption[parent.layoutNm+'-Value2'].columnData }}
<span class="data-unit ml5 point-none" :style="styleObj('-Value2')">
{{ parent.componentOption[parent.layoutNm+'-Value2'].unitData }}
</span>
</p>
</div>
</div>
</div>
</template>
<script>
import defaultIcon from '../../../resources/img/icon/1.png';
export default {
props:{
parent: {
type: Object,
required: true
},
optionChangeClick: {
type: Function,
},
componentOptn: {
type: Object,
required: true
},
},
data() {
return {
iconPath1:defaultIcon,
iconPath2:defaultIcon,
}
},
methods: {
handleIconChange(event) {
const clickElement = event.target.id;
const file = event.target.files && event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onloadend = () => {
if (event.target.id === this.parent.layoutNm + '-iconImg1') {
this.iconPath1 = reader.result;
} else if (event.target.id === this.parent.layoutNm + '-iconImg2') {
this.iconPath2 = reader.result;
}
};
reader.readAsDataURL(file);
},
optionChangeClick: function(e) {
this.$emit('parentInfo', this.parent);
this.optionChangeClick(e);
},
baseSetting: function() {
this.parent['componentOption'][this.parent.layoutNm+'-MainTitle'] = JSON.parse(JSON.stringify(this.componentOptn));
this.parent['componentOption'][this.parent.layoutNm+'-Value1'] = JSON.parse(JSON.stringify(this.componentOptn));
this.parent['componentOption'][this.parent.layoutNm+'-Value2'] = JSON.parse(JSON.stringify(this.componentOptn));
},
styleObj: function(name) {
return {
fontSize: this.parent.componentOption[this.parent.layoutNm + name].textSize+'pt',
fontWeight: this.parent.componentOption[this.parent.layoutNm + name].textStyle === 'bold' ? 'bold' : '',
fontStyle: this.parent.componentOption[this.parent.layoutNm + name].textStyle === 'normal' ? 'normal' : '',
textAlign: this.parent.componentOption[this.parent.layoutNm + name].textAlign
}
},
},
watch: {
},
computed: {
},
components: {
},
mounted() {
this.baseSetting();
}
}
</script>
<style scoped>
.point-none {
pointer-events: none;
}
</style>