fix(img-cropper): 修复图片裁剪问题 (#299)

jd-ftf · Apr 21, 2021 · 30caca8 · 30caca8
1 parent ffc617a
commit 30caca8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/examples/docs/docs/changelog.md b/examples/docs/docs/changelog.md
@@ -1,5 +1,17 @@
 ## 更新日志
 
+### 2.3.1
+
+*2021-04-22*
+
+#### Bug 修复
+
+- ImgCropper
+  - 修复二次选择图片时图片尺寸不匹配的问题 (by [@yawuling](https://github.com/yawuling) )
+  - 修复 `img-width` 和 `img-height` 属性设置 `number` 类型时无效的问题 (by [@yawuling](https://github.com/yawuling) )
+- Picker
+  - 修复国际化文案异常问题 (by [@HXCStudio123](https://github.com/HXCStudio123) )
+
 ### 2.3.0
 
 *2021-04-21*

diff --git a/examples/docs/docs/imgCropper.md b/examples/docs/docs/imgCropper.md
@@ -91,8 +91,8 @@ export default {
 |-----|------|-----|-------|-------|---------|
 | value/v-model | 打开图片裁剪组件 | Boolean | - | false | 2.3.0 |
 | img-src | 图片资源链接 | String | - | - | 2.3.0 |
-| img-width | 截屏预览图片的初始宽度，默认单位为px；`1、设置宽度不设置高度，按照宽度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；` | Number / String | - | - | 2.3.0 |
-| img-height | 截屏预览图片的初始高度，默认单位为px；`1、设置高度不设置宽度，按照高度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；` | Number / String | - | - | 2.3.0 |
+| img-width | 截屏预览图片的初始宽度; `1、设置宽度不设置高度，按照宽度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | Number / String | - | - | 2.3.0 |
+| img-height | 截屏预览图片的初始高度; `1、设置高度不设置宽度，按照高度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | Number / String | - | - | 2.3.0 |
 | disabled-rotate | 禁止图片旋转 | Boolean | - | false | 2.3.0 |
 | export-scale | 设置导出图片尺寸 | Number | - | 2 | 2.3.0 |
 | max-scale | 最大缩放倍数 | Number | - | 3 | 2.3.0 |

diff --git a/packages/img-cropper/src/main.vue b/packages/img-cropper/src/main.vue
@@ -264,8 +264,8 @@ export default {
       this.$nextTick(() => {
         this.resize()
 
-        INIT_IMGWIDTH = this.picWidth
-        INIT_IMGHEIGHT = this.picHeight
+        INIT_IMGWIDTH = this.imgWidth
+        INIT_IMGHEIGHT = this.imgHeight
         const cutSize = this.rootWidth - this.offset * 2
         this.cutWidth = cutSize
         this.cutHeight = cutSize
@@ -362,7 +362,7 @@ export default {
         }
       } else if (INIT_IMGHEIGHT && !INIT_IMGWIDTH) {
         picWidth = imgInfo.width / imgInfo.height * INIT_IMGHEIGHT
-      } else if (!INIT_IMGHEIGHT && INIT_IMGWIDTH) {
+      } else if ((!INIT_IMGHEIGHT && INIT_IMGWIDTH) || (INIT_IMGHEIGHT && INIT_IMGWIDTH)) {
         picHeight = imgInfo.height / imgInfo.width * INIT_IMGWIDTH
       }
 
@@ -392,10 +392,14 @@ export default {
       if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'string' && INIT_IMGWIDTH.indexOf('%') !== -1) {
         const width = INIT_IMGWIDTH.replace('%', '')
         INIT_IMGWIDTH = this.picWidth = this.rootWidth / 100 * width
+      } else if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'number') {
+        this.picWidth = INIT_IMGWIDTH
       }
       if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'string' && INIT_IMGHEIGHT.indexOf('%') !== -1) {
         const height = this.picHeight.replace('%', '')
         INIT_IMGHEIGHT = this.picHeight = this.rootHeight / 100 * height
+      } else if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'number') {
+        this.picWidth = INIT_IMGHEIGHT
       }
     },