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

fix(ImagePreview): incorrect drag area (#6574)

Browse Source
This commit is contained in:
neverland 2020-06-19 11:24:12 +08:00 committed by GitHub
parent 99db42372c
commit 5b2f13311c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,6 +84,10 @@ export default createComponent({
},
data() {
this.imageSizes = [];
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
return {
scale: 1,
moveX: 0,
@ -180,16 +184,24 @@ export default createComponent({
startMove(event) {
const image = event.currentTarget;
const rect = image.getBoundingClientRect();
const winWidth = window.innerWidth;
const winHeight = window.innerHeight;
this.touchStart(event);
this.setMaxMove(image.dataset.index);
this.moving = true;
this.startMoveX = this.moveX;
this.startMoveY = this.moveY;
this.maxMoveX = Math.max(0, (rect.width - winWidth) / 2);
this.maxMoveY = Math.max(0, (rect.height - winHeight) / 2);
},
setMaxMove(index) {
const { scale, windowWidth, windowHeight } = this;
if (this.imageSizes[index]) {
const { displayWidth, displayHeight } = this.imageSizes[index];
this.maxMoveX = Math.max(0, (displayWidth * scale - windowWidth) / 2);
this.maxMoveY = Math.max(0, (displayHeight * scale - windowHeight) / 2);
} else {
this.maxMoveX = 0;
this.maxMoveY = 0;
}
},
startZoom(event) {
@ -199,6 +211,31 @@ export default createComponent({
this.startDistance = getDistance(event.touches);
},
onImageLoad(event, index) {
const { windowWidth, windowHeight } = this;
const { naturalWidth, naturalHeight } = event.target;
const windowRatio = windowHeight / windowWidth;
const imageRatio = naturalHeight / naturalWidth;
let displayWidth;
let displayHeight;
if (imageRatio < windowRatio) {
displayWidth = windowWidth;
displayHeight = windowWidth * imageRatio;
} else {
displayWidth = windowHeight / imageRatio;
displayHeight = windowHeight;
}
this.imageSizes[index] = {
naturalWidth,
naturalHeight,
displayWidth,
displayHeight,
};
},
onImageTouchStart(event) {
const { touches } = event;
const { offsetX = 0 } = this.$refs.swipe || {};
@ -335,12 +372,16 @@ export default createComponent({
src={image}
fit="contain"
class={bem('image')}
data-index={index}
scopedSlots={imageSlots}
style={index === this.active ? this.imageStyle : null}
nativeOnTouchstart={this.onImageTouchStart}
nativeOnTouchmove={this.onImageTouchMove}
nativeOnTouchend={this.onImageTouchEnd}
nativeOnTouchcancel={this.onImageTouchEnd}
onLoad={(event) => {
this.onImageLoad(event, index);
}}
/>
</SwipeItem>
))}

2
src/image-preview/test/__snapshots__/index.spec.js.snap
View File

@ -61,7 +61,7 @@ exports[`set show-index prop to false 1`] = `
`;
exports[`zoom 1`] = `
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);" data-index="0"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>