mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<template>
|
|
<div
|
|
v-show="value"
|
|
class="van-image-preview"
|
|
@touchstart="onTouchStart"
|
|
@touchmove.prevent="touchMove"
|
|
@touchend="onTouchEnd"
|
|
@touchcancel="onTouchEnd"
|
|
>
|
|
<swipe :initial-swipe="startPosition">
|
|
<swipe-item v-for="(item, index) in images" :key="index">
|
|
<img class="van-image-preview__image" :src="item" >
|
|
</swipe-item>
|
|
</swipe>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import create from '../utils/create';
|
|
import Popup from '../mixins/popup';
|
|
import Swipe from '../swipe';
|
|
import SwipeItem from '../swipe-item';
|
|
import Touch from '../mixins/touch';
|
|
|
|
export default create({
|
|
name: 'image-preview',
|
|
|
|
mixins: [Popup, Touch],
|
|
|
|
components: {
|
|
Swipe,
|
|
SwipeItem
|
|
},
|
|
|
|
props: {
|
|
overlay: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
closeOnClickOverlay: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
images: [],
|
|
startPosition: 0
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
onTouchStart(event) {
|
|
this.touchStartTime = new Date();
|
|
this.touchStart(event);
|
|
},
|
|
|
|
onTouchEnd(event) {
|
|
event.preventDefault();
|
|
// prevent long tap to close component
|
|
const deltaTime = new Date() - this.touchStartTime;
|
|
if (deltaTime < 100 && this.offsetX < 20 && this.offsetY < 20) {
|
|
this.$emit('input', false);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|