fix(ImagePreview): incorrect move range in some cases (#7142)

* fix(ImagePreview): incorrect move range in some cases

* chore: remove inBrowser

* test(ImagePreview): fix failed case

src/image-preview/ImagePreview.js

@@ -1,5 +1,4 @@
 // Utils
-import { inBrowser } from '../utils';
 import { bem, createComponent } from './shared';
 
 // Mixins
@@ -82,13 +81,13 @@ export default createComponent({
   data() {
     return {
       active: 0,
-      windowWidth: 0,
-      windowHeight: 0,
+      rootWidth: 0,
+      rootHeight: 0,
       doubleClickTimer: null,
     };
   },
 
-  created() {
+  mounted() {
     this.resize();
   },
 
@@ -99,6 +98,7 @@ export default createComponent({
       if (val) {
         this.setActive(+this.startPosition);
         this.$nextTick(() => {
+          this.resize();
           this.$refs.swipe.swipeTo(+this.startPosition, { immediate: true });
         });
       } else {
@@ -112,9 +112,10 @@ export default createComponent({
 
   methods: {
     resize() {
-      if (inBrowser) {
-        this.windowWidth = window.innerWidth;
-        this.windowHeight = window.innerHeight;
+      if (this.$el && this.$el.getBoundingClientRect) {
+        const rect = this.$el.getBoundingClientRect();
+        this.rootWidth = rect.width;
+        this.rootHeight = rect.height;
       }
     },
 
@@ -174,8 +175,8 @@ export default createComponent({
               active={this.active}
               maxZoom={this.maxZoom}
               minZoom={this.minZoom}
-              windowWidth={this.windowWidth}
-              windowHeight={this.windowHeight}
+              rootWidth={this.rootWidth}
+              rootHeight={this.rootHeight}
               onScale={this.emitScale}
               onClose={this.emitClose}
             />

src/image-preview/ImagePreviewItem.js

@@ -27,8 +27,8 @@ export default {
     active: Number,
     minZoom: [Number, String],
     maxZoom: [Number, String],
-    windowWidth: Number,
-    windowHeight: Number,
+    rootWidth: Number,
+    rootHeight: Number,
   },
 
   data() {
@@ -46,9 +46,9 @@ export default {
 
   computed: {
     vertical() {
-      const { windowWidth, windowHeight } = this;
-      const windowRatio = windowHeight / windowWidth;
-      return this.imageRatio > windowRatio;
+      const { rootWidth, rootHeight } = this;
+      const rootRatio = rootHeight / rootWidth;
+      return this.imageRatio > rootRatio;
     },
 
     imageStyle() {
@@ -69,10 +69,10 @@ export default {
     maxMoveX() {
       if (this.imageRatio) {
         const displayWidth = this.vertical
-          ? this.windowHeight / this.imageRatio
-          : this.windowWidth;
+          ? this.rootHeight / this.imageRatio
+          : this.rootWidth;
 
-        return Math.max(0, (this.scale * displayWidth - this.windowWidth) / 2);
+        return Math.max(0, (this.scale * displayWidth - this.rootWidth) / 2);
       }
 
       return 0;
@@ -81,13 +81,10 @@ export default {
     maxMoveY() {
       if (this.imageRatio) {
         const displayHeight = this.vertical
-          ? this.windowHeight
-          : this.windowWidth * this.imageRatio;
+          ? this.rootHeight
+          : this.rootWidth * this.imageRatio;
 
-        return Math.max(
-          0,
-          (this.scale * displayHeight - this.windowHeight) / 2
-        );
+        return Math.max(0, (this.scale * displayHeight - this.rootHeight) / 2);
       }
 
       return 0;

src/image-preview/test/index.spec.js

@@ -219,12 +219,7 @@ test('register component', () => {
 });
 
 test('zoom in and drag image to move', async () => {
-  const restore = mockGetBoundingClientRect({ width: 100 });
-  const originWindowWidth = window.innerWidth;
-  const originWindowHeight = window.innerHeight;
-
-  window.innerWidth = 100;
-  window.innerHeight = 100;
+  const restore = mockGetBoundingClientRect({ width: 100, height: 100 });
 
   const wrapper = mount(ImagePreviewVue, {
     propsData: { images, value: true },
@@ -248,8 +243,6 @@ test('zoom in and drag image to move', async () => {
   triggerDrag(image, 300, 300);
   expect(wrapper.find('.van-image')).toMatchSnapshot();
 
-  window.innerWidth = originWindowWidth;
-  window.innerHeight = originWindowHeight;
   restore();
 });