udi-cpt-vue/src/views/components/cropperFile.vue

<template>
  <div class="upfile">
    <div>
      <el-button type="primary" icon="el-icon-plus"  size="small" @click="getCropImg" style="margin-left: 50px">新增资质图片</el-button>
    </div>
    <!--    <div v-else class="addFileImg">-->
    <!--      <img :src="imgBase64">-->
    <!--    </div>-->
    <!--    <div v-else class="addFileImg" @click="getCropImg">-->
    <!--      <img :src="imgBase64">-->
    <!--    </div>-->

    <!--截图区域-->
    <div class="CropDialogVisible" v-show="isCropDialogVisible">
      <div class="CropDialog-main" style="height: 80vh;position: relative;">
        <div class="CropDialog-close" @click="isCropDialogVisible = false">×</div>
        <cropper-img ref="cropImg"></cropper-img>
      </div>
    </div>

  </div>
</template>

<script>

import cropperImg from './cropperImg.vue'

export default {
  name: "upfile",
  props: ["type", "imgUrl"],
  created() {
    console.log(this.imgUrl);
    if (this.imgUrl) {
      this.imgBase64 = this.imgUrl
      this.filedisabled = false
    }


  },
  data() {
    return {

      imgBase64: '',
      //
      isCropDialogVisible: false,
      cropFile: '',
      isAddFile: true
    };
  },
  components: {
    cropperImg
  },
  methods: {
    getCropImg() {
      let that = this
      this.$refs.cropImg.setCropImg()
      setTimeout(function () {
        that.isCropDialogVisible = true
      }, 500)

    },
    getCropApi(data) {
      console.log(data);
      // this.imgBase64 = base64
      this.isCropDialogVisible = false
      this.isAddFile = false
      this.$emit("getCropFile", data)
    }


  }
};
</script>

<style lang="scss" scoped>
.CropDialogVisible {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .CropDialog-main {
    width: 80%;
    height: 80%;
    background: #ffffff;

    .CropDialog-close {
      width: 40px;
      height: 40px;
      background: #666666;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      position: absolute;
      top: -12px;
      right: -20px;
      font-size: 38px;
      cursor: pointer;
    }

  }
}

.upfile {
  width: 200px;

  .addFileImg {
    display: block;
    width: 80px;
    height: 80px;
    background: #eeeeee;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .addFile {
    width: 80px;
    height: 80px;
    border: 1px dotted #64686B;
    border-radius: 4px;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64686B;

  }
}

.avatar-file {
  text-align: center;
}

.avatar-file-text {
  width: 240px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  line-height: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  padding: 0 5px;
  cursor: pointer;
  border-radius: 0;
}

.avatar-file-text img {
  width: 16px;
  height: 16px;
  margin-right: 9px;
}

.avatar-file-imgbox {
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #C0C4CC;
}

.filename {

  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  text-align: left;
  color: #1d73f6;
  line-height: 22px;
  margin-left: 10px;
}

.filename span {
  width: 8px;
  height: 8px;
  // color: #ff0000;
  font-size: 36px;
  cursor: pointer;
}
</style>