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

Merge branch 'feature/code_review'

Browse Source
This commit is contained in:
cookfront 2017-04-01 15:52:08 +08:00
commit 71d209469a
5 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/examples-dist/image-preview.vue
View File

@ -24,9 +24,9 @@ export default {
methods: { methods: {
handleImagePreview() { handleImagePreview() {
ImagePreview([ ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', 'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg', 'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
]); ]);
} }
} }

4
docs/examples-dist/uploader.vue
View File

@ -1,12 +1,12 @@
<template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法"> <template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
<div class="uploader-container"> <div class="uploader-container">
<zan-uploader :before-read="logContent" :after-read="logContent"> <zan-uploader :before-read="logContent" @file-readed="logContent">
</zan-uploader> </zan-uploader>
</div> </div>
</example-block><example-block title="自定义上传图标"> </example-block><example-block title="自定义上传图标">
<div class="uploader-container"> <div class="uploader-container">
<zan-uploader :after-read="logContent"> <zan-uploader @file-readed="logContent">
<zan-icon name="photograph"></zan-icon> <zan-icon name="photograph"></zan-icon>
</zan-uploader> </zan-uploader>
</div> </div>

4
docs/examples-docs/image-preview.md
View File

@ -18,9 +18,9 @@ export default {
methods: { methods: {
handleImagePreview() { handleImagePreview() {
ImagePreview([ ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', 'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg', 'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
]); ]);
} }
} }

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

@ -1,11 +1,9 @@
<template> <template>
<transition name="image-fade"> <transition name="image-fade">
<div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick"> <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"> <zan-swipe-item v-for="item in images">
<img class="zan-image-preview__image" :src="item" alt="" :class="{ <img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
'zan-image-preview__image--center': true
}">
</zan-swipe-item> </zan-swipe-item>
</zan-swipe> </zan-swipe>
</div> </div>
@ -53,6 +51,22 @@ export default {
this.value = false; 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() { close() {
if (this.closing) return; if (this.closing) return;

15
packages/zanui-css/src/image_preview.css
View File

@ -11,25 +11,26 @@
@e image { @e image {
display: block; display: block;
width: 100%;
height: auto;
transition: .2s ease-out;
position: absolute; position: absolute;
left: 0; left: 0;
@m center { @m center {
width: 100%;
height: auto;
top: 50%; top: 50%;
transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);
} }
} }
.zan-swipe { .zan-image-preview__image--big {
height: 100%; height: 100%;
overflow: visible; width: auto;
left: 50%;
transform: translate3d(-50%, 0, 0);
} }
.zan-swipe__items { .zan-swipe {
overflow: visible; height: 100%;
} }
} }
} }