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

image preview

Browse Source
This commit is contained in:
cookfront 2017-03-15 20:56:37 +08:00
parent bf710d1261
commit 0bf7852f0b
8 changed files with 68 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,21 @@
<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template> <template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1><example-block title="">
<zan-button @click="handleImagePreview">预览图片</zan-button>
</example-block></section></template>
<script> <script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script> import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
import { ImagePreview } from 'src/index';
export default {
methods: {
handleImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
]);
}
}
};
</script>

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

@ -4,7 +4,7 @@
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
<zan-swipe-item> <zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
</zan-swipe> </zan-swipe>
@ -14,7 +14,7 @@
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
<zan-swipe-item> <zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
</zan-swipe> </zan-swipe>

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

@ -1,3 +1,25 @@
<script>
import { ImagePreview } from 'src/index';
export default {
methods: {
handleImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
]);
}
}
};
</script>
## ImagePreview 图片预览 ## ImagePreview 图片预览
### 基础用法
:::demo
```html
<zan-button @click="handleImagePreview">预览图片</zan-button>
```
:::

4
docs/examples-docs/swipe.md
View File

@ -23,7 +23,7 @@
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
<zan-swipe-item> <zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
</zan-swipe> </zan-swipe>
``` ```
@ -38,7 +38,7 @@
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
<zan-swipe-item> <zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt=""> <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item> </zan-swipe-item>
</zan-swipe> </zan-swipe>
``` ```

4
packages/image-preview/src/image-preview.js
View File

@ -12,13 +12,13 @@ const initInstance = () => {
}); });
}; };
var ImagePreviewBox = image => { var ImagePreviewBox = images => {
if (!instance) { if (!instance) {
initInstance(); initInstance();
} }
if (!instance.value) { if (!instance.value) {
instance.image = image; instance.images = images;
document.body.appendChild(instance.$el); document.body.appendChild(instance.$el);

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

@ -1,22 +1,32 @@
<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">
<img class="zan-image-preview__image" :src="image" alt="" :class="{ <zan-swipe>
'zan-image-preview__image--center': true, <zan-swipe-item v-for="item in images">
'zan-image-preview__image--top': imageIsLargeView <img class="zan-image-preview__image" :src="item" alt="" :class="{
}"> 'zan-image-preview__image--center': true
}">
</zan-swipe-item>
</zan-swipe>
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import Popup from 'src/mixins/popup'; import Popup from 'src/mixins/popup';
import ZanSwipe from 'packages/swipe';
import ZanSwipeItem from 'packages/swipe-item';
export default { export default {
name: 'zan-image-preview', name: 'zan-image-preview',
mixins: [Popup], mixins: [Popup],
components: {
ZanSwipe,
ZanSwipeItem
},
props: { props: {
overlay: { overlay: {
default: true default: true
@ -33,7 +43,7 @@ export default {
data() { data() {
return { return {
image: '', images: [],
viewportSize: null viewportSize: null
}; };
}, },
@ -42,36 +52,6 @@ export default {
handlePreviewClick() { handlePreviewClick() {
this.value = false; this.value = false;
}, },
/**
* 图片样式计算
* 根据屏幕自适应显示最长边
*/
computeImageStyle() {
// const previewSize = this.$refs.previewContainer.getBoundingClientRect();
// const img = new Image();
// const _this = this;
// img.onload = function() {
// const imgRatio = parseFloat(this.width / this.height);
// const previewRatio = parseFloat(previewSize.width / previewSize.height);
// if (previewRatio <= imgRatio) {
// const top = (previewSize.height - parseInt(previewSize.width / imgRatio, 10)) / 2;
// _this.imageStyle = {
// width: '100%',
// height: 'auto',
// top: top + 'px'
// };
// } else if (previewRatio > imgRatio) {
// _this.imageStyle = {
// width: 'auto',
// height: '100%'
// };
// }
// };
// img.src = this.image;
},
close() { close() {
if (this.closing) return; if (this.closing) return;

2
packages/swipe/src/scroll.js
View File

@ -49,7 +49,6 @@ extend(Scroll.prototype, {
left: 0, left: 0,
width: '100%', width: '100%',
height: '100%', height: '100%',
display: 'block',
'-webkit-transform': 'translate3d(-9999px, 0, 0)', '-webkit-transform': 'translate3d(-9999px, 0, 0)',
'pointer-events': 'none' 'pointer-events': 'none'
}; };
@ -75,6 +74,7 @@ extend(Scroll.prototype, {
page = this.getCurrentPage(); page = this.getCurrentPage();
if (page) { if (page) {
page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)'; page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
page.style['display'] = 'block';
} }
leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)]; leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)];

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

@ -5,13 +5,13 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: scroll; overflow: auto;
@e image { @e image {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
transition: .2s; transition: .2s ease-out;
position: absolute; position: absolute;
left: 0; left: 0;
@ -19,11 +19,10 @@
top: 50%; top: 50%;
transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);
} }
}
@m top { .zan-swipe {
top: 0; height: 100%;
transform: none;
}
} }
} }
} }