add

src/views/components/avatarUpload.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="components-container">
+    <code>这里核心代码用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'>vue-image-crop-upload</a>
+    由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
+    </code>
+
+    <PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
+    </PanThumb>
+    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
+    </el-button>
+
+    <ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey"
+      v-show="imagecropperShow" />
+  </div>
+</template>
+<script>
+    import ImageCropper from 'components/ImageCropper';
+    import PanThumb from 'components/PanThumb';
+    export default {
+      components: { ImageCropper, PanThumb },
+      data() {
+        return {
+          imagecropperShow: false,
+          imagecropperKey: 0
+        }
+      },
+      methods: {
+        cropSuccess() {
+          this.imagecropperShow = false;
+          this.imagecropperKey = this.imagecropperKey + 1;
+        }
+      }
+    };
+</script>
+<style scoped>
+.avatar{
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+}
+</style>
+