修改头像裁剪

vue/package-lock.json

@@ -11402,9 +11402,9 @@
       "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
     },
     "vue-cropper": {
-      "version": "0.5.3",
+      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.4.tgz",
-      "integrity": "sha512-rh8pBZ6pkYbieLYlZ95kBBb+PelU+So4gEv7gwbo4lLft9SCkTc2saGEBtFqh4XqzH2j3Dq3+wNCgo44C7cs2A=="
+      "integrity": "sha512-9wwHOk1eHdl+nyq2fnIFDeDMjaXPh1dqfY+FdeEGU7Z/cKVOyH0pLrW0/5NH3xnRzqrU3DAQ8LjC/9/eHdvqKA=="
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",

vue/package.json

@@ -23,7 +23,7 @@
     "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
     "vue-count-to": "^1.0.13",
-    "vue-cropper": "^0.5.3",
+    "vue-cropper": "^0.5.4",
     "vue-router": "^3.3.2",
     "vuex": "^3.4.0"
   },

vue/src/views/userCenter/components/Avatar.vue

@@ -1,6 +1,6 @@
 <template>
     <dialog-form :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
-        <el-row class="avatar-cropper" type="flex">
+        <el-row class="avatar-cropper">
             <div class="img-wrapper">
                 <vue-cropper
                         ref="cropper"
@@ -9,33 +9,22 @@
                         autoCrop
                         autoCropHeight="200px"
                         autoCropWidth="200px"
-                        centerBox
                         fixedBox
                         full
                         outputType="png"
-                        @realTime="previews=$event"
                         @wheel.native.prevent="scale"
                 />
             </div>
-            <div class="operate-wrapper">
+            <input
-                <div class="preview-container">
+                    ref="input"
-                    <div :style="previews.div">
+                    accept="image/png, image/jpeg, image/gif, image/jpg"
-                        <img :src="previews.url" :style="previews.img">
+                    style="display: none"
-                    </div>
+                    type="file"
-                </div>
+                    @change="chooseImage"
-                <el-button size="small" type="primary" @click="$refs.input.click()">
+            >
-                    选择图片
-                    <input
-                            ref="input"
-                            accept="image/png, image/jpeg, image/gif, image/jpg"
-                            style="display: none"
-                            type="file"
-                            @change="chooseImage"
-                    >
-                </el-button>
-            </div>
         </el-row>
         <template v-slot:footer>
+            <el-button plain size="small" @click="$refs.input.click()">选择图片</el-button>
             <el-button plain size="small" @click="closeDialog">取 消</el-button>
             <el-button size="small" type="primary" @click="confirm">确 定</el-button>
         </template>
@@ -60,7 +49,6 @@
         data() {
             return {
                 loading: false,
-                previews: {},
                 img: '',
                 name: ''
             }
@@ -123,33 +111,17 @@
 
 <style lang="scss">
     .avatar-cropper {
+        .cropper-crop-box {
+            border: 1px solid #39f;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+
         .img-wrapper {
             height: 360px;
             width: 640px;
             display: inline-block;
             border: 1px solid #ebebeb;
         }
-
-        .operate-wrapper {
-            padding: 0 40px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-
-            .preview-container {
-                border: 1px solid #ebebeb;
-                height: 200px;
-                width: 200px;
-                overflow: hidden;
-                border-radius: 50%;
-                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
-            }
-
-            .el-button {
-                margin-left: 0;
-                margin-top: 20px;
-                width: 100%;
-            }
-        }
     }
 </style>