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: {
handleImagePreview() {
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/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]);
}
}

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="基础用法">
<div class="uploader-container">
<zan-uploader :before-read="logContent" :after-read="logContent">
<zan-uploader :before-read="logContent" @file-readed="logContent">
</zan-uploader>
</div>
</example-block><example-block title="自定义上传图标">
<div class="uploader-container">
<zan-uploader :after-read="logContent">
<zan-uploader @file-readed="logContent">
<zan-icon name="photograph"></zan-icon>
</zan-uploader>
</div>

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

@ -18,9 +18,9 @@ export default {
methods: {
handleImagePreview() {
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/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]);
}
}

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;

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

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