From 9ff8e5635c1dd88c74989ab525df7df29a7dc8c1 Mon Sep 17 00:00:00 2001
From: landluck <landl_ww@163.com>
Date: Fri, 14 Feb 2020 17:21:13 +0800
Subject: [PATCH] feat(ImagePreview): add scale event (#5658)

---
 src/image-preview/ImagePreview.js    |  5 ++++-
 src/image-preview/README.md          | 11 ++++++++++-
 src/image-preview/README.zh-CN.md    | 11 ++++++++++-
 src/image-preview/index.js           |  6 ++++++
 src/image-preview/test/index.spec.js | 19 +++++++++++++++++++
 5 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index 60e030fe4..831de9425 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -274,7 +274,10 @@ export default createComponent({
     },
 
     setScale(scale) {
-      this.scale = range(scale, +this.minZoom, +this.maxZoom);
+      const value = range(scale, +this.minZoom, +this.maxZoom);
+
+      this.scale = value;
+      this.$emit('scale', { index: this.active, scale: value });
     },
 
     resetScale() {
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 8168a0aeb..8e4a5d5ab 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -108,6 +108,7 @@ export default {
 | swipeDuration | Animation duration (ms) | *number \| string* | `500` |
 | onClose | Triggered when close | *Function* | - |
 | onChange `v2.0.3` | Triggered when current image change | *Function* | - |
+| onScale | Triggered when current image scale | *Function* | - |
 | closeOnPopstate | Whether to close when popstate | *boolean* | `false` |
 | asyncClose | Whether to enable async close | *boolean* | `false` |
 | className | Custom className | *any* | - |
@@ -144,6 +145,7 @@ export default {
 |------|------|------|
 | close | Triggered when close | { index, url } |
 | change | Triggered when current image change | index: index of current image |
+| scale | Triggered when current image scale | { index: index of current image, scale: scale of current image} |
 
 ### Slots
 
@@ -157,4 +159,11 @@ export default {
 | Attribute | Description | Type |
 |------|------|------|
 | url | Url of current image | *number* |
-| index | Index of current image | *string* |
+| index | Index of current image | *number* |
+
+### onScale Parematers
+
+| Attribute | Description | Type |
+|------|------|------|
+| index | Index of current image | *number* |
+| scale | scale of current image | *number* |
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index eaa52bc23..25ac9229e 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -120,6 +120,7 @@ export default {
 | loop | 是否开启循环播放 | *boolean* | `true` |
 | onClose | 关闭时的回调函数 | *Function* | - |
 | onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - |
+| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | *Function* | - |
 | asyncClose | 是否开启异步关闭 | *boolean* | `false` |
 | closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` |
 | className | 自定义类名 | *any* | - |
@@ -160,7 +161,8 @@ export default {
 | 事件 | 说明 | 回调参数 |
 |------|------|------|
 | close | 关闭时触发 | { index: 索引, url: 图片链接 } |
-| change | 切换当前图片时触发 | index, 当前图片的索引 |
+| change | 切换当前图片时触发 | index: 当前图片的索引 |
+| scale | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } |
 
 ### Slots
 
@@ -178,6 +180,13 @@ export default {
 | url | 当前图片 URL | *string* |
 | index | 当前图片的索引值 | *number* |
 
+### onScale 回调参数
+
+| 参数名 | 说明 | 类型 |
+|------|------|------|
+| index | 当前图片的索引值 | *number* |
+| scale | 当前图片的缩放值 | *number* |
+
 ## 常见问题
 
 ### 在桌面端无法操作组件？
diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index ad41607d5..5c7a67791 100644
--- a/src/image-preview/index.js
+++ b/src/image-preview/index.js
@@ -36,6 +36,12 @@ const initInstance = () => {
       instance.onChange(index);
     }
   });
+
+  instance.$on('scale', data => {
+    if (instance.onScale) {
+      instance.onScale(data);
+    }
+  });
 };
 
 const ImagePreview = (images, startPosition = 0) => {
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index 4c1a4eca2..2b7c5834d 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -163,6 +163,25 @@ test('onChange option', async done => {
   triggerDrag(swipe, 1000, 0);
 });
 
+test('onScale option', async done => {
+  const { getBoundingClientRect } = Element.prototype;
+  Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
+
+  const instance = ImagePreview({
+    images,
+    startPosition: 0,
+    onScale({ index, scale }) {
+      expect(index).toEqual(2);
+      expect(scale <= 2).toBeTruthy();
+      done();
+    },
+  });
+
+  const image = instance.$el.getElementsByTagName('img')[0];
+  triggerZoom(image, 300, 300);
+  Element.prototype.getBoundingClientRect = getBoundingClientRect;
+});
+
 test('register component', () => {
   Vue.use(ImagePreview);
   expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();