feat(ImagePreview): add scale event (#5658)

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() {

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* |

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* |
+
 ## 常见问题
 
 ### 在桌面端无法操作组件？

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) => {

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();