ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 08:37:23 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

[new feature] ImagePreview reconstruct (#201)

Browse Source 
* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases

* [bugfix] Swipe shouid reinitialize when item changes

* [new feature] ImagePreview reconstruct
This commit is contained in:
neverland
2017-10-12 20:26:28 -05:00
committed by GitHub
parent 4dfa56e796
commit d7cee6e8f4
4 changed files with 78 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/image-preview/image-preview.vue
View File

@@ -1,17 +1,21 @@
<template>
<transition name="image-fade">
<div class="van-image-preview" ref="previewContainer" v-show="value">
<van-swipe>
<van-swipe-item v-for="(item, index) in images" :key="index">
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
</van-swipe-item>
</van-swipe>
</div>
</transition>
<div
v-show="value"
class="van-image-preview"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@touchcancel="onTouchEnd"
>
<van-swipe>
<van-swipe-item v-for="(item, index) in images" :key="index">
<img class="van-image-preview__image" :src="item" >
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
import Vue from 'vue';
import Popup from '../mixins/popup';
import Swipe from '../swipe';
import SwipeItem from '../swipe-item';
@@ -30,11 +34,9 @@ export default {
overlay: {
default: true
},
lockOnScroll: {
default: true
},
closeOnClickOverlay: {
default: true
}
@@ -42,73 +44,31 @@ export default {
data() {
return {
images: [],
viewportSize: null
images: []
};
},
methods: {
handleLoad(event) {
const container = this.$refs.previewContainer;
const containerSize = container.getBoundingClientRect();
const ratio = containerSize.width / containerSize.height;
const target = event.currentTarget;
const targetRatio = target.width / target.height;
const centerClass = 'van-image-preview__image--center';
const bigClass = 'van-image-preview__image--big';
if (targetRatio > ratio) {
target.className += (' ' + centerClass);
} else {
target.className += (' ' + bigClass);
}
onTouchStart(event) {
this.touchStartTime = new Date();
this.touchStartX = event.touches[0].clientX;
this.touchStartY = event.touches[0].clientY;
this.deltaX = 0;
this.deltaY = 0;
},
close() {
/* istanbul ignore if */
if (this.closing) return;
onTouchMove(event) {
event.preventDefault();
this.deltaX = event.touches[0].clientX - this.touchStartX;
this.deltaY = event.touches[0].clientY - this.touchStartY;
},
this.closing = true;
this.value = false;
/* istanbul ignore else */
if (this.lockOnScroll) {
setTimeout(() => {
if (this.overlay && this.bodyOverflow !== 'hidden') {
document.body.style.overflow = this.bodyOverflow;
}
this.bodyOverflow = null;
}, 200);
}
this.opened = false;
this.doAfterClose();
}
},
mounted() {
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
const container = this.$refs.previewContainer;
/* istanbul ignore else */
if (supportTouch) {
let touchStartTime;
container.addEventListener('touchstart', () => {
touchStartTime = new Date();
});
container.addEventListener('touchend', () => {
/* istanbul ignore else */
if (new Date() - touchStartTime < 100) {
this.value = false;
}
});
} else {
container.addEventListener('click', () => {
onTouchEnd() {
// prevent long tap to close component
const deltaTime = new Date() - this.touchStartTime;
if (deltaTime < 100 && Math.abs(this.deltaX) < 20 && Math.abs(this.deltaY) < 20) {
this.value = false;
});
}
}
}
};