86 lines
3.4 KiB
Vue
86 lines
3.4 KiB
Vue
<template>
|
|
<view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
|
|
<view v-for="(item, index) in propCustomList" :key="item.id" class="main-content"
|
|
:style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
|
|
<template v-if="item.key == 'text'">
|
|
<model-text :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-text>
|
|
</template>
|
|
<template v-else-if="item.key == 'img'">
|
|
<model-image :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-image>
|
|
</template>
|
|
<template v-else-if="item.key == 'auxiliary-line'">
|
|
<model-lines :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType"></model-lines>
|
|
</template>
|
|
<template v-else-if="item.key == 'icon'">
|
|
<model-icon :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-icon>
|
|
</template>
|
|
<template v-else-if="item.key == 'panel'">
|
|
<model-panel :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-panel>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import modelText from '@/components/diy/modules/custom/model-text.vue';
|
|
import modelLines from '@/components/diy/modules/custom/model-lines.vue';
|
|
import modelImage from '@/components/diy/modules/custom/model-image.vue';
|
|
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
|
|
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
|
|
export default {
|
|
components: {
|
|
modelText,
|
|
modelLines,
|
|
modelImage,
|
|
modelIcon,
|
|
modelPanel,
|
|
},
|
|
props: {
|
|
propCustomList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
required: true,
|
|
},
|
|
propSourceList: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
},
|
|
propSourceType: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
propDataHeight: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
propScale: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
propDataIndex: {
|
|
type: Number,
|
|
default: 1,
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
get_percentage_count() {
|
|
return (num) => {
|
|
return num * this.propScale + 'px';
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
url_event(e) {
|
|
this.$emit('url_event', e);
|
|
}
|
|
},
|
|
};
|
|
</script>
|