diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js index 3b56ee72e..9b5d6156b 100644 --- a/src/image-preview/ImagePreview.js +++ b/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} /> diff --git a/src/image-preview/ImagePreviewItem.js b/src/image-preview/ImagePreviewItem.js index 0c4c2ec0d..14a7f1848 100644 --- a/src/image-preview/ImagePreviewItem.js +++ b/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; diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js index 198afab04..64aca1fe5 100644 --- a/src/image-preview/test/index.spec.js +++ b/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(); });