最新版本541200007

doum

5 天以前 bc09bc87234065abe7130b84c92f81f143f5f3e7

 admin/src/components/common/ImageCropper.vue

@@ -6,22 +6,20 @@
          <vue-cropper
              ref="cropper"
              :img="imgSrc"
              :width="options.width"
              :height="options.height"
              :canScale="options.canScale"
              :autoCrop="options.autoCrop"
              :canMove="options.canMove"
              :output-size="options.outputSize"
              :centerBox="options.centerBox"
              :autoCropWidth="options.autoCropWidth"
              :autoCropHeight="options.autoCropHeight"
              :autoCropWidth="autoCrop.width || options.autoCropWidth"
              :autoCropHeight="autoCrop.height || options.autoCropHeight"
              @realTime="realTime"
          ></vue-cropper>
        </div>
        <div class="previews">
          <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
          <!--          <el-image-->
          <!--            v-if="cutImgSrc"-->
          <!--            style="width: 100px; height: 100px;vertical-align: middle;border-radius: 50%;"-->
          <!--            :src="cutImgSrc"-->
          <!--            fit="fill"></el-image>-->
          <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="图片">
        </div>
      </div>
    </div>
@@ -30,7 +28,7 @@

<script>
import { VueCropper } from 'vue-cropper'
import {upload} from "@/api/system/common";
import { upload } from '@/api/system/common'
export default {
  name: 'ImageCropper',
  components: { VueCropper },
@@ -38,6 +36,12 @@
    imgSrc: {
      type: String,
      default: ''
    },
    autoCrop: {
      type: Object,
      default () {
        return { width: 500, height: 500 }
      }
    },
    // 回显上次保存的截图的位置
    location: {
@@ -76,8 +80,11 @@
        autoCrop: true,
        canMove: false,
        centerBox: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        height: 500,
        width: 500,
        outputSize: 1,
        autoCropWidth: 500,
        autoCropHeight: 500,
        fixed: true,
        fixedNumber: [1, 1]
      },
@@ -93,8 +100,8 @@
  watch: {
  },
  methods: {
    getImagecropper(){
      return  this.$refs.cropper
    getImagecropper () {
      return this.$refs.cropper
    },
    // 学习截图框变化事件
    realTime (data) {
@@ -170,10 +177,12 @@
.iconShot {
  .icon-dialog {
    .clip {
      display: flex;
      .img {
        height: 400px;
        flex: 7.5;
        height: 500px;
        //float: left;
        // display: inline-block;

        .vue-cropper {
          background-image: none;
        }
@@ -186,13 +195,15 @@

      }
      .previews {
        width: 100%;
        height: 100px;
        position: relative;
        //width: 100px;
        flex: 2.5;
        //float: right;
        height: 200px;
        //position: relative;
        >img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          //position: absolute;
          //left: 50%;
          transform: translate(35%, 50px);
          max-height: 100%;
        }
      }