ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 18:54:24 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix image preview

Browse Source
This commit is contained in:
cookfront
2017-04-01 15:51:47 +08:00
parent 780f900f5c
commit 641473e2b6
5 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/image-preview/src/image-preview.vue
View File

@@ -1,11 +1,9 @@
<template>
<transition name="image-fade">
<div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
<zan-swipe :show-indicators="false">
<zan-swipe>
<zan-swipe-item v-for="item in images">
<img class="zan-image-preview__image" :src="item" alt="" :class="{
'zan-image-preview__image--center': true
}">
<img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
</zan-swipe-item>
</zan-swipe>
</div>
@@ -53,6 +51,22 @@ export default {
this.value = false;
},
handleLoad(event) {
const containerSize = this.$refs.previewContainer.getBoundingClientRect();
const ratio = containerSize.width / containerSize.height;
const target = event.currentTarget;
const targetRatio = target.width / target.height;
const centerClass = 'zan-image-preview__image--center';
const bigClass = 'zan-image-preview__image--big';
if (targetRatio > ratio) {
target.className += (' ' + centerClass);
} else {
target.className += (' ' + bigClass);
}
},
close() {
if (this.closing) return;