mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-09-30 05:59:57 +08:00
fix: 修复长按图片,图片隐藏问题
This commit is contained in:
parent
8ceef31886
commit
b2b1a2a24d
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition name="image-fade">
|
<transition name="image-fade">
|
||||||
<div class="van-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
|
<div class="van-image-preview" ref="previewContainer" v-show="value">
|
||||||
<van-swipe>
|
<van-swipe>
|
||||||
<van-swipe-item v-for="item in images">
|
<van-swipe-item v-for="item in images">
|
||||||
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
|
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
|
||||||
@ -11,6 +11,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Vue from 'vue';
|
||||||
import Popup from 'src/mixins/popup';
|
import Popup from 'src/mixins/popup';
|
||||||
import VanSwipe from 'packages/swipe';
|
import VanSwipe from 'packages/swipe';
|
||||||
import VanSwipeItem from 'packages/swipe-item';
|
import VanSwipeItem from 'packages/swipe-item';
|
||||||
@ -47,12 +48,9 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handlePreviewClick() {
|
|
||||||
this.value = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
handleLoad(event) {
|
handleLoad(event) {
|
||||||
const containerSize = this.$refs.previewContainer.getBoundingClientRect();
|
const container = this.$refs.previewContainer;
|
||||||
|
const containerSize = container.getBoundingClientRect();
|
||||||
const ratio = containerSize.width / containerSize.height;
|
const ratio = containerSize.width / containerSize.height;
|
||||||
const target = event.currentTarget;
|
const target = event.currentTarget;
|
||||||
const targetRatio = target.width / target.height;
|
const targetRatio = target.width / target.height;
|
||||||
@ -88,6 +86,28 @@ export default {
|
|||||||
this.opened = false;
|
this.opened = false;
|
||||||
this.doAfterClose();
|
this.doAfterClose();
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
|
||||||
|
const container = this.$refs.previewContainer;
|
||||||
|
|
||||||
|
if (supportTouch) {
|
||||||
|
let touchStartTime;
|
||||||
|
|
||||||
|
container.addEventListener('touchstart', () => {
|
||||||
|
touchStartTime = new Date();
|
||||||
|
});
|
||||||
|
container.addEventListener('touchend', () => {
|
||||||
|
if (new Date() - touchStartTime < 1500) {
|
||||||
|
this.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
container.addEventListener('click', () => {
|
||||||
|
this.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user