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

fix(ImagePreview): should not close when click index (#4764)

Browse Source
This commit is contained in:
neverland 2019-10-17 21:07:15 +08:00 committed by GitHub
parent 7999098060
commit 321905a4b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,8 @@ const [createComponent, bem] = createNamespace('image-preview');
function getDistance(touches) {
return Math.sqrt(
((touches[0].clientX - touches[1].clientX) ** 2) +
((touches[0].clientY - touches[1].clientY) ** 2)
(touches[0].clientX - touches[1].clientX) ** 2 +
(touches[0].clientY - touches[1].clientY) ** 2
);
}
@ -69,9 +69,9 @@ export default createComponent({
scale: 1,
moveX: 0,
moveY: 0,
active: 0,
moving: false,
zooming: false,
active: 0,
doubleClickTimer: null
};
},
@ -264,11 +264,16 @@ export default createComponent({
<Swipe
ref="swipe"
loop={this.loop}
class={bem('swipe')}
duration={this.swipeDuration}
indicatorColor="white"
initialSwipe={this.startPosition}
showIndicators={this.showIndicators}
onChange={this.setActive}
nativeOnTouchstart={this.onWrapperTouchStart}
nativeOnTouchMove={preventDefault}
nativeOnTouchend={this.onWrapperTouchEnd}
nativeOnTouchcancel={this.onWrapperTouchEnd}
>
{this.images.map((image, index) => (
<SwipeItem>
@ -298,13 +303,7 @@ export default createComponent({
return (
<transition name="van-fade">
<div
class={[bem(), this.className]}
onTouchstart={this.onWrapperTouchStart}
onTouchMove={preventDefault}
onTouchend={this.onWrapperTouchEnd}
onTouchcancel={this.onWrapperTouchEnd}
>
<div class={[bem(), this.className]}>
{this.genImages()}
{this.genIndex()}
</div>

8
src/image-preview/index.less
View File

@ -7,6 +7,10 @@
width: 100%;
height: 100%;
&__swipe {
height: 100%;
}
&__image {
position: absolute;
top: 0;
@ -33,8 +37,4 @@
&__overlay {
background-color: @image-preview-overlay-background-color;
}
.van-swipe {
height: 100%;
}
}

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

@ -2,7 +2,7 @@
exports[`index slot 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
</div>
<div class="van-image-preview__index">Custom Index</div>
@ -11,7 +11,7 @@ exports[`index slot 1`] = `
exports[`lazy-load prop 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img class="van-image__img" style="object-fit: contain;">
@ -42,7 +42,7 @@ exports[`lazy-load prop 1`] = `
exports[`render image 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
@ -73,7 +73,7 @@ exports[`render image 1`] = `
exports[`set show-index prop to false 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
</div>
</div>
@ -81,7 +81,7 @@ exports[`set show-index prop to false 1`] = `
exports[`zoom 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="transition-duration: 500ms; width: 0px; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">