blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity

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

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

* chore: remove inBrowser

* test(ImagePreview): fix failed case
This commit is contained in:
neverland 2020-09-09 17:59:59 +08:00 committed by GitHub
parent 5e6734f31c
commit 3dddeaa7a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/image-preview/ImagePreview.js
View File

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

25
src/image-preview/ImagePreviewItem.js
View File

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

9
src/image-preview/test/index.spec.js
View File

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