Fix(avatar-upload): make AvatarUpload component an wrapper for vue-image-crop-upload

* Fix the bug that the background still showing when closed
* Add more options for AvatarUpload component
* Add docs and links for AvatarUpload component

Author: Armour

src/components/AvatarUpload/index.vue

@@ -1,65 +1,77 @@
 <template>
-  <div
-    v-show="value"
-    class="vue-image-crop-upload"
-  >
-    <div class="vicp-wrap">
-      <img-upload
-        v-model="show"
-        field="img"
-        :width="300"
-        :height="300"
-        url="https://httpbin.org/post"
-        :params="params"
-        :headers="headers"
-        img-format="png"
-        @crop-success="cropSuccess"
-        @crop-upload-success="cropUploadSuccess"
-        @crop-upload-fail="cropUploadFail"
-      />
-    </div>
-  </div>
+  <image-crop-upload
+    v-model="show"
+    :field="field"
+    :url="url"
+    :width="width"
+    :height="height"
+    :params="params"
+    :headers="headers"
+    :lang-type="language"
+    :with-credentials="true"
+    img-format="png"
+    @src-file-set="srcFileSet"
+    @crop-success="cropSuccess"
+    @crop-upload-success="cropUploadSuccess"
+    @crop-upload-fail="cropUploadFail"
+  />
 </template>
 
 <script lang="ts">
+import ImageCropUpload from 'vue-image-crop-upload'
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import imgUpload from 'vue-image-crop-upload'
+import { AppModule } from '@/store/modules/app'
 
 @Component({
   name: 'AvatarUpload',
   components: {
-    imgUpload
+    ImageCropUpload
   }
 })
 export default class extends Vue {
-  @Prop({ default: true }) private value!: boolean
+  // You can add more Prop, see: https://github.com/dai-siki/vue-image-crop-upload#usage
+  @Prop({ required: true }) private value!: boolean
+  @Prop({ required: true }) private url!: string
+  @Prop({ required: true }) private field!: string
+  @Prop({ default: 300 }) private width!: number
+  @Prop({ default: 300 }) private height!: number
+  @Prop({ default: () => {} }) private params!: object
+  @Prop({ default: () => {} }) private headers!: object
 
-  private customStyle!: Object
-  private show = true
-  private params = { token: '123456798', name: 'avatar' }
-  private headers = { smail: '*_~' }
-  private imgDataUrl = ''
+  // https://github.com/dai-siki/vue-image-crop-upload#language-package
+  private languageTypeList: { [key: string]: string } = {
+    'en': 'en',
+    'zh': 'zh',
+    'es': 'es-MX',
+    'ja': 'ja'
+  }
+
+  get show() {
+    return this.value
+  }
+
+  set show(value) {
+    this.$emit('input', value)
+  }
+
+  get language() {
+    return this.languageTypeList[AppModule.language]
+  }
 
-  private toggleShow() {
-    this.show = !this.show
+  private srcFileSet(fileName: string, fileType: string, fileSize: number) {
+    this.$emit('src-file-set', fileName, fileType, fileSize)
   }
 
   private cropSuccess(imgDataUrl: string, field: string) {
-    console.log('-------- crop success --------')
-    this.imgDataUrl = imgDataUrl
+    this.$emit('crop-success', imgDataUrl, field)
   }
 
   private cropUploadSuccess(jsonData: any, field: string) {
-    console.log('-------- upload success --------')
-    console.log(jsonData)
-    this.$emit('crop-upload-success', jsonData.files.img)
-    console.log('field: ' + field)
+    this.$emit('crop-upload-success', jsonData, field)
   }
 
   private cropUploadFail(status: boolean, field: string) {
-    console.log('-------- upload fail --------')
-    console.log(status)
-    console.log('field: ' + field)
+    this.$emit('crop-upload-fail', status, field)
   }
 }
 </script>

src/components/BackToTop/index.vue

@@ -37,7 +37,7 @@ export default class extends Vue {
       }
     }
   })
-  private customStyle!: Object
+  private customStyle!: object
 
   private visible = false
   private isMoving = false

src/views/components-demo/avatar-upload.vue

@@ -14,20 +14,20 @@
       type="primary"
       icon="upload"
       tyle="position: absolute;bottom: 15px;margin-left: 40px;"
-      @click="imagecropperShow=true"
+      @click="toggleShow"
     >
       Change Avatar
     </el-button>
-
     <avatar-upload
-      v-show="imagecropperShow"
-      :key="imagecropperKey"
+      v-model="showImageUpload"
+      field="avatar"
       :width="300"
       :height="300"
+      :params="params"
+      :headers="headers"
       url="https://httpbin.org/post"
-      lang-type="en"
-      @close="close"
-      @crop-upload-success="cropSuccess"
+      @close="onClose"
+      @crop-upload-success="onCropUploadSuccess"
     />
   </div>
 </template>
@@ -45,23 +45,27 @@ import PanThumb from '@/components/PanThumb/index.vue'
   }
 })
 export default class extends Vue {
-  private imagecropperShow = false
-  private imagecropperKey = 0
+  private showImageUpload = false
   private image = 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
+  private params = { some_params: 'your_params_goes_here' }
+  private headers = { smail: '*_~' }
+
+  private toggleShow() {
+    this.showImageUpload = !this.showImageUpload
+  }
 
-  private cropSuccess(resData: string) {
-    this.imagecropperShow = false
-    this.imagecropperKey = this.imagecropperKey + 1
-    this.image = resData
+  private onCropUploadSuccess(jsonData: any, field: string) {
+    this.showImageUpload = false
+    this.image = jsonData.files[field]
   }
 
-  private close() {
-    this.imagecropperShow = false
+  private onClose() {
+    this.showImageUpload = false
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .avatar {
   width: 200px;
   height: 200px;