Merge branch 'dev' into next

src/image-preview/ImagePreview.js

@@ -1,5 +1,4 @@
 // Utils
-import { inBrowser } from '../utils';
 import { bem, createComponent } from './shared';
 import { callInterceptor } from '../utils/interceptor';
 
@@ -79,13 +78,13 @@ export default createComponent({
   data() {
     return {
       active: 0,
-      windowWidth: 0,
-      windowHeight: 0,
+      rootWidth: 0,
+      rootHeight: 0,
       doubleClickTimer: null,
     };
   },
 
-  created() {
+  mounted() {
     this.resize();
   },
 
@@ -96,6 +95,7 @@ export default createComponent({
       if (val) {
         this.setActive(+this.startPosition);
         this.$nextTick(() => {
+          this.resize();
           this.$refs.swipe.swipeTo(+this.startPosition, { immediate: true });
         });
       } else {
@@ -109,9 +109,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,
   },
 
   emits: ['scale', 'close'],
@@ -48,9 +48,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() {
@@ -71,10 +71,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;
@@ -83,13 +83,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();
 });
 

src/tabs/index.js

@@ -4,6 +4,7 @@ import { scrollLeftTo, scrollTopTo } from './utils';
 import { route } from '../composition/use-route';
 import { isHidden } from '../utils/dom/style';
 import { on, off } from '../utils/dom/event';
+import { unitToPx } from '../utils/format/unit';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
 import {
@@ -119,9 +120,13 @@ export default createComponent({
       }
     },
 
+    offsetTopPx() {
+      return unitToPx(this.offsetTop);
+    },
+
     scrollOffset() {
       if (this.sticky) {
-        return +this.offsetTop + this.tabHeight;
+        return this.offsetTopPx + this.tabHeight;
       }
       return 0;
     },
@@ -151,7 +156,7 @@ export default createComponent({
 
       // scroll to correct position
       if (this.stickyFixed && !this.scrollspy) {
-        setRootScrollTop(Math.ceil(getElementTop(this.$el) - this.offsetTop));
+        setRootScrollTop(Math.ceil(getElementTop(this.$el) - this.offsetTopPx));
       }
     },