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

[improvement] ImagePreview: add fade transition (#2196)

Browse Source
This commit is contained in:
neverland 2018-12-01 08:46:42 +08:00 committed by GitHub
parent 66c940d672
commit d14f9cb5dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/image-preview/ImagePreview.vue
View File

@ -1,41 +1,43 @@
<template> <template>
<div <transition name="van-fade">
v-if="value"
:class="b()"
@touchstart="onWrapperTouchStart"
@touchend="onWrapperTouchEnd"
@touchcancel="onWrapperTouchEnd"
>
<div <div
v-if="showIndex" v-if="value"
:class="b('index')" :class="b()"
@touchstart="onWrapperTouchStart"
@touchend="onWrapperTouchEnd"
@touchcancel="onWrapperTouchEnd"
> >
{{ active + 1 }}/{{ count }} <div
</div> v-if="showIndex"
<swipe :class="b('index')"
ref="swipe"
:loop="loop"
indicator-color="white"
:initial-swipe="startPosition"
:show-indicators="showIndicators"
@change="onChange"
>
<swipe-item
v-for="(item, index) in images"
:key="index"
> >
<img {{ active + 1 }}/{{ count }}
:class="b('image')" </div>
:src="item" <swipe
:style="index === active ? imageStyle : null" ref="swipe"
@touchstart="onTouchStart" :loop="loop"
@touchmove="onTouchMove" indicator-color="white"
@touchend="onTouchEnd" :initial-swipe="startPosition"
@touchcancel="onTouchEnd" :show-indicators="showIndicators"
@change="onChange"
>
<swipe-item
v-for="(item, index) in images"
:key="index"
> >
</swipe-item> <img
</swipe> :class="b('image')"
</div> :src="item"
:style="index === active ? imageStyle : null"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@touchcancel="onTouchEnd"
>
</swipe-item>
</swipe>
</div>
</transition>
</template> </template>
<script> <script>
@ -176,7 +178,7 @@ export default create({
onTouchStart(event) { onTouchStart(event) {
const { touches } = event; const { touches } = event;
const { offsetX } = this.$refs.swipe; const { offsetX = 0 } = this.$refs.swipe || {};
if (touches.length === 1 && this.scale !== 1) { if (touches.length === 1 && this.scale !== 1) {
this.startMove(event); this.startMove(event);

4
packages/image-preview/test/__snapshots__/index.spec.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render image 1`] = ` exports[`render image 1`] = `
<div class="van-image-preview"> <div class="van-image-preview" name="van-fade">
<div class="van-image-preview__index"> <div class="van-image-preview__index">
1/3 1/3
</div> </div>
@ -23,7 +23,7 @@ exports[`render image 1`] = `
`; `;
exports[`zoom 1`] = ` exports[`zoom 1`] = `
<div class="van-image-preview"> <div class="van-image-preview" name="van-fade">
<div class="van-image-preview__index"> <div class="van-image-preview__index">
1/3 1/3
</div> </div>

4
packages/image-preview/test/index.spec.js
View File

@ -1,7 +1,9 @@
import Vue from 'vue'; import Vue from 'vue';
import ImagePreview from '..'; import ImagePreview from '..';
import ImagePreviewVue from '../ImagePreview'; import ImagePreviewVue from '../ImagePreview';
import { mount, trigger, triggerDrag } from '../../../test/utils'; import { mount, trigger, triggerDrag, transitionStub } from '../../../test/utils';
transitionStub();
function triggerZoom(el, x, y) { function triggerZoom(el, x, y) {
trigger(el, 'touchstart', 0, 0, { x, y }); trigger(el, 'touchstart', 0, 0, { x, y });