使用vue-cropper实现最实用的图片裁剪组件

先上效果图：

1、安装vue-cropper

npm install --save vue-cropperjs

2、项目中引入使用：

（1）全局引入man.js

import Vue from 'vue'
import VueCropper from 'vue-cropper'
import 'cropperjs/dist/cropper.css'

Vue.use(VueCropper)

（2）组件中单独引用

import VueCropper from 'vue-cropper'
import 'cropperjs/dist/cropper.css'

export default {
    components: {
        VueCropper
    }
}

3、封装组件

crop.vue

style.less

.crop {
  padding: 20px;
  .cropper-div {
    margin: 20px auto;
    width: 800px;
    height: 500px;
  }
  .oprate-data-div {
		margin: 20px 50px 0 0;
		.crop-img-box {
			width: 100%;
			height: 100px;
			img {
				max-height: 100%;
				max-width: 100%;
			}
		}
    .el-input {
      margin-top: 10px;
    }
		.finish-btn {
			margin-top: 20px;
			text-align: center;
		}
  }
}