|  |  |  | 
|---|
|  |  |  | ></vue-cropper> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="previews"> | 
|---|
|  |  |  | <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图片"> | 
|---|
|  |  |  | <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="图片"> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | autoCrop: true, | 
|---|
|  |  |  | canMove: false, | 
|---|
|  |  |  | centerBox: true, | 
|---|
|  |  |  | height: 300, | 
|---|
|  |  |  | width: 300, | 
|---|
|  |  |  | outputSize:{width: 300, height: 300}, | 
|---|
|  |  |  | autoCropWidth: 300, | 
|---|
|  |  |  | autoCropHeight: 300, | 
|---|
|  |  |  | height: 500, | 
|---|
|  |  |  | width: 500, | 
|---|
|  |  |  | outputSize:{width: 500, height: 500 }, | 
|---|
|  |  |  | autoCropWidth: 500, | 
|---|
|  |  |  | autoCropHeight: 500, | 
|---|
|  |  |  | fixed: true, | 
|---|
|  |  |  | fixedNumber: [1, 1] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | getImagecropper(){ | 
|---|
|  |  |  | return  this.$refs.cropper | 
|---|
|  |  |  | return this.$refs.cropper | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 学习截图框变化事件 | 
|---|
|  |  |  | realTime (data) { | 
|---|
|  |  |  | 
|---|
|  |  |  | .iconShot { | 
|---|
|  |  |  | .icon-dialog { | 
|---|
|  |  |  | .clip { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | .img { | 
|---|
|  |  |  | height: 400px; | 
|---|
|  |  |  | flex: 7.5; | 
|---|
|  |  |  | height: 500px; | 
|---|
|  |  |  | //float: left; | 
|---|
|  |  |  | // display: inline-block; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .vue-cropper { | 
|---|
|  |  |  | background-image: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .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%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|