|  |  |  | 
|---|
|  |  |  | :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> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import { VueCropper } from 'vue-cropper' | 
|---|
|  |  |  | import {upload} from "@/api/system/common"; | 
|---|
|  |  |  | import { upload } from '@/api/system/common' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'ImageCropper', | 
|---|
|  |  |  | components: { VueCropper }, | 
|---|
|  |  |  | 
|---|
|  |  |  | imgSrc: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | autoCrop: { | 
|---|
|  |  |  | type: Object, | 
|---|
|  |  |  | default () { | 
|---|
|  |  |  | return { width: 500, height: 500 } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 回显上次保存的截图的位置 | 
|---|
|  |  |  | location: { | 
|---|
|  |  |  | 
|---|
|  |  |  | centerBox: true, | 
|---|
|  |  |  | height: 500, | 
|---|
|  |  |  | width: 500, | 
|---|
|  |  |  | outputSize:{width: 500, height: 500 }, | 
|---|
|  |  |  | outputSize: 1, | 
|---|
|  |  |  | autoCropWidth: 500, | 
|---|
|  |  |  | autoCropHeight: 500, | 
|---|
|  |  |  | fixed: true, | 
|---|
|  |  |  | 
|---|
|  |  |  | watch: { | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | getImagecropper(){ | 
|---|
|  |  |  | getImagecropper () { | 
|---|
|  |  |  | return this.$refs.cropper | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 学习截图框变化事件 | 
|---|