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.filePath + ')' }" @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>