bug fix

src/modules/admin/ocr/OcrTest.vue

@@ -33,6 +33,20 @@
           >
             <el-button type="primary" size="mini">重新上传</el-button>
           </el-upload>
+          <div class="scale-control">
+            <el-tooltip effect="dark" content="放大" placement="top">
+              <i
+                class="el-icon-circle-plus-outline scale-icon"
+                @click="scaleHandle(0.1, true)"
+              ></i>
+            </el-tooltip>
+            <el-tooltip effect="dark" content="缩小" placement="top">
+              <i
+                class="el-icon-remove-outline scale-icon"
+                @click="scaleHandle(-0.1, true)"
+              ></i>
+            </el-tooltip>
+          </div>
           <div class="box" ref="centerBox" @mousedown="dragstart($event)">
             <img
               :src="imageUrl"
@@ -40,7 +54,6 @@
               @load="initImgSize"
               :style="{
                 maxWidth: maxWidth + 'px',
-                maxHeight: maxHeight + 'px',
               }"
             />
           </div>
@@ -122,7 +135,7 @@ export default {
       index: 0,
 
       scale: 1,
-      scaleNum: 0.25, // 缩放比例
+      scaleNum: 0.2, // 缩放比例
       scaleMax: 10, // 最大缩放比例
       scaleMin: 0.1, // 最小缩放比例
       dragData: {
@@ -145,12 +158,13 @@ export default {
     initImgSize() {
       this.maxWidth = this.$refs.dragOuter.offsetWidth - 40;
       this.maxHeight = this.$refs.dragOuter.offsetHeight - 40;
+      this.scale = 1;
     },
     scaleDom() {
       this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(${this.scale})`;
     },
-    scaleHandle(e) {
-      let dy = -e.deltaY || e.wheelDeltaY;
+    scaleHandle(e, isBtn) {
+      let dy = isBtn ? e : -e.deltaY || e.wheelDeltaY;
       if (dy < 0) {
         this.scale -= this.scaleNum;
       } else {
@@ -164,7 +178,7 @@ export default {
         this.scale = this.scaleMin;
         return;
       }
-      this.$refs.centerBox.style.transition = "none";
+      this.$refs.centerBox.style.transition = `all 0.3s ease-in-out`;
       this.scaleDom();
       return false;
     },
@@ -334,7 +348,8 @@ export default {
           position: relative;
           overflow: hidden;
           &:hover {
-            .reset {
+            .reset,
+            .scale-control {
               // display: block;
               opacity: 1;
             }
@@ -348,6 +363,30 @@ export default {
             transition: all 0.3s;
             opacity: 0;
           }
+          .scale-control {
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+            z-index: 10000;
+            transition: all 0.3s;
+            opacity: 0;
+            height: 30px;
+            border-radius: 4px;
+            background: rgba(0, 0, 0, 0.6);
+            width: 88px;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            padding: 0 10px;
+            & > .scale-icon {
+              color: #fff;
+              font-size: 20px;
+              cursor: pointer;
+              &:hover {
+                font-weight: bold;
+              }
+            }
+          }
           .box {
             user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
             position: absolute;