使用vueCropper插件封装一个图片裁剪组件

1. 组件封装

2. 使用插件

 
...
data() {
  return {
    // 当前上传的方向
      currentHandleImgName: '',
      // 当前要裁剪的图片
      currentCropperImgUrl: '',
      // 真实的文件名
      originalFileNameInfo: {
        idCardFrontPic: '',
        idCardBackPic: ''
      },
  }
}
methods: {
  handleCropperSuccess(data) {
    this.idCardInfo[this.currentHandleImgName] = [data]
    this.currentCropperImgUrl = ''
  }
}