surveyMaker/src/components/ImgPanel.vue

<template>
  <div
    style="display: flex;
  flex-wrap: wrap; align-content: baseline; justify-content: space-between ; padding-left: 21px; padding-right: 21px;padding-top: 27px;">
    <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'
               :showSelectedPic="showSelectedPicOrUnSelectedPic">
    </PicPicker>
    <template v-if="ismultiple">
      <div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
           @click="selectedImg(element)" v-for="element in picList1"></div>
    </template>
    <template v-else-if="isButton">
      <div class="ele" :style="{ backgroundImage: 'url(' + element.backgroundUnselectedImg + ')' }"
           @click="selectedImg(element)"
           v-for="element in picList3"></div>
    </template>
    <template v-else>
      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
           v-for="element in picList2"></div>
    </template>
  </div>
</template>

<script>
    import appConst from '../util/appConst'
    import PicPicker from './PicturePicker'

    export default {
        props: {
            selectedImg: {
                type: Function
            },
            themeId: {
                type: String
            },
            isButton: Boolean,
            ismultiple: Boolean,
            showSelectedPicOrUnSelectedPic: {
                type: Function
            }
        },
        data() {
            return {
                http: appConst.BACKEND_DOMAIN
            }
        },
        computed: {
            picList() {
                return this.$store.state.editor.picList
            },
            picList1() {
                var arr = [];
                this.picList.forEach(function (item) {
                    if (item.morePic) {
                        arr.push(item)
                    }
                })
                return arr
            },
            picList2() {
                var arr = [];
                this.picList.forEach(function (item) {
                    if (!item.morePic && !item.isButton) {
                        arr.push(item)
                    }
                })
                return arr
            },

            picList3() {
                var arr = [];
                this.picList.forEach(function (item) {
                    if (!item.morePic && item.isButton) {
                        arr.push(item)
                    }
                })
                return arr
            }
        },
        methods: {
            uploadImage(data) {
                this.$store.dispatch('savePic', {
                    'filePath': data['filePath'],
                    'themeId': this.themeId,
                    'width': data['width'],
                    'height': data['height'],
                    'morePic': data.morePic,
                    'isButton': data.isButton,
                })
            }
        },
        components: {
            PicPicker
        }
    }
</script>

<style lang="less" scoped>
  .ele-add {
    float: left;
    width: 45%;
    height: calc(324px * 0.45 * 0.73);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 16px;

    &:hover {
      cursor: pointer;
    }
  }

  .ele {
    float: left;
    width: 45%;
    height: calc(324px * 0.45 * 0.73);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 16px;

    &:hover {
      border: 2px solid #4E5DFF;
      cursor: pointer;
    }
  }
</style>