index.vue

<template>
  <el-drawer title="媒体库" :visible.sync="drawer" :with-header="false">
    <div style="display:flex;justify-content:space-around;flex-wrap:wrap;padding-top:40px">
      <el-image
        class="header-img-box-list"
        :src="item.url"
        v-for="(item,key) in picList"
        :key="key"
        @click.native="chooseImg(item.url,target,targetKey)"
      >
        <div slot="error" class="header-img-box-list">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </div>
  </el-drawer>
</template>

<script>
import { getFileList } from "@/api/fileUploadAndDownload";
export default {
  props: {
    target: [Object],
    targetKey: [String]
  },
  data() {
    return {
      drawer: false,
      picList: []
    };
  },
  methods: {
    chooseImg(url, target, targetKey) {
      if(target&&targetKey){
        target[targetKey] = url;
      }
      this.$emit("enter-img", url);
      this.drawer = false;
    },
    async open() {
      const res = await getFileList({ page: 1, pageSize: 9999 });
      this.picList = res.data.list;
      this.drawer = true;
    }
  }
};
</script>

<style lang="scss">
.header-img-box-list {
  width: 180px;
  height: 180px;
  border: 1px dashed #ccc;
  border-radius: 20px;
  text-align: center;
  line-height: 180px;
  cursor: pointer;
}
</style>