mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] ImagePreview reconstruct (#201)
* [Document] add english document of Checkbox * [Document] add english document of Field * [Document] add english document of NumberKeyboard * [bugfix] NumberKeyboard should not dispaly title when title is empty * [Document] add english document of PasswordInput * [Document] add english document of Radio * [document] add english document of Switch * [bugfix] remove redundent styles in english document * [Document] fix details * fix Switch test cases * [bugfix] Swipe shouid reinitialize when item changes * [new feature] ImagePreview reconstruct
This commit is contained in:
neverland
GitHub
parent
4dfa56e796
commit
d7cee6e8f4
@ -1,17 +1,21 @@
|
||||
<template>
|
||||
<transition name="image-fade">
|
||||
<div class="van-image-preview" ref="previewContainer" v-show="value">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="(item, index) in images" :key="index">
|
||||
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
v-show="value"
|
||||
class="van-image-preview"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@touchcancel="onTouchEnd"
|
||||
>
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="(item, index) in images" :key="index">
|
||||
<img class="van-image-preview__image" :src="item" >
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Popup from '../mixins/popup';
|
||||
import Swipe from '../swipe';
|
||||
import SwipeItem from '../swipe-item';
|
||||
@ -30,11 +34,9 @@ export default {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
}
|
||||
@ -42,73 +44,31 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
images: [],
|
||||
viewportSize: null
|
||||
images: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleLoad(event) {
|
||||
const container = this.$refs.previewContainer;
|
||||
const containerSize = container.getBoundingClientRect();
|
||||
const ratio = containerSize.width / containerSize.height;
|
||||
const target = event.currentTarget;
|
||||
const targetRatio = target.width / target.height;
|
||||
|
||||
const centerClass = 'van-image-preview__image--center';
|
||||
const bigClass = 'van-image-preview__image--big';
|
||||
|
||||
if (targetRatio > ratio) {
|
||||
target.className += (' ' + centerClass);
|
||||
} else {
|
||||
target.className += (' ' + bigClass);
|
||||
}
|
||||
onTouchStart(event) {
|
||||
this.touchStartTime = new Date();
|
||||
this.touchStartX = event.touches[0].clientX;
|
||||
this.touchStartY = event.touches[0].clientY;
|
||||
this.deltaX = 0;
|
||||
this.deltaY = 0;
|
||||
},
|
||||
|
||||
close() {
|
||||
/* istanbul ignore if */
|
||||
if (this.closing) return;
|
||||
onTouchMove(event) {
|
||||
event.preventDefault();
|
||||
this.deltaX = event.touches[0].clientX - this.touchStartX;
|
||||
this.deltaY = event.touches[0].clientY - this.touchStartY;
|
||||
},
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.value = false;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.overlay && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
|
||||
const container = this.$refs.previewContainer;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (supportTouch) {
|
||||
let touchStartTime;
|
||||
|
||||
container.addEventListener('touchstart', () => {
|
||||
touchStartTime = new Date();
|
||||
});
|
||||
container.addEventListener('touchend', () => {
|
||||
/* istanbul ignore else */
|
||||
if (new Date() - touchStartTime < 100) {
|
||||
this.value = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
container.addEventListener('click', () => {
|
||||
onTouchEnd() {
|
||||
// prevent long tap to close component
|
||||
const deltaTime = new Date() - this.touchStartTime;
|
||||
if (deltaTime < 100 && Math.abs(this.deltaX) < 20 && Math.abs(this.deltaY) < 20) {
|
||||
this.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -6,30 +6,19 @@ let instance;
|
||||
const ImagePreviewConstructor = Vue.extend(ImagePreview);
|
||||
|
||||
const initInstance = () => {
|
||||
/* istanbul ignore if */
|
||||
if (Vue.prototype.$isServer) return;
|
||||
instance = new ImagePreviewConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
document.body.appendChild(instance.$el);
|
||||
};
|
||||
|
||||
var ImagePreviewBox = images => {
|
||||
/* istanbul ignore if */
|
||||
if (Vue.prototype.$isServer) return;
|
||||
const ImagePreviewBox = images => {
|
||||
if (!instance) {
|
||||
initInstance();
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (!instance.value) {
|
||||
instance.images = images;
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
|
||||
Vue.nextTick(() => {
|
||||
instance.value = true;
|
||||
});
|
||||
}
|
||||
instance.images = images;
|
||||
instance.value = true;
|
||||
};
|
||||
|
||||
export default ImagePreviewBox;
|
||||
|
||||
@ -1,30 +1,21 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-image-preview {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&--center {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.van-image-preview__image--big {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.van-swipe {
|
||||
|
||||
@ -1,65 +1,49 @@
|
||||
import Vue from 'vue';
|
||||
import { mount } from 'avoriaz';
|
||||
import { triggerTouch } from '../utils';
|
||||
import ImagePreview from 'packages/image-preview';
|
||||
import Wrapper from 'avoriaz/dist/Wrapper';
|
||||
import ImagePreviewVue from 'packages/image-preview/image-preview';
|
||||
|
||||
const images = [
|
||||
'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'
|
||||
];
|
||||
|
||||
describe('ImagePreview', () => {
|
||||
beforeEach(() => {
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
const el = document.querySelector('.van-image-preview');
|
||||
if (!el) return;
|
||||
if (el.parentNode) {
|
||||
el.parentNode.removeChild(el);
|
||||
}
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a image preview', (done) => {
|
||||
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'
|
||||
]);
|
||||
|
||||
expect(document.querySelector('.van-image-preview')).to.exist;
|
||||
|
||||
setTimeout(() => {
|
||||
const image = document.querySelector('.van-image-preview');
|
||||
const avImage = new Wrapper({ elm: image }, () => {}, false);
|
||||
avImage.trigger('click');
|
||||
avImage.trigger('touchstart');
|
||||
avImage.trigger('touchend');
|
||||
setTimeout(() => {
|
||||
expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
|
||||
expect(document.body.style.overflow).to.equal('');
|
||||
done();
|
||||
}, 500);
|
||||
}, 500);
|
||||
it('call ImagePreview Function', (done) => {
|
||||
ImagePreview(images);
|
||||
Vue.nextTick(() => {
|
||||
expect(document.querySelectorAll('.van-image-preview img').length).to.equal(3);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a body hidden image preview', (done) => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
it('create a ImagePreview Component', (done) => {
|
||||
wrapper = mount(ImagePreviewVue);
|
||||
wrapper.vm.images = images;
|
||||
wrapper.vm.value = true;
|
||||
|
||||
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'
|
||||
]);
|
||||
expect(wrapper.hasClass('van-image-preview')).to.be.true;
|
||||
|
||||
expect(document.querySelector('.van-image-preview')).to.exist;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('img').length).to.equal(3);
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 100, 100);
|
||||
triggerTouch(wrapper, 'touchend', 0, 0);
|
||||
expect(wrapper.vm.value).to.be.true;
|
||||
|
||||
setTimeout(() => {
|
||||
const image = document.querySelector('.van-image-preview');
|
||||
const avImage = new Wrapper({ elm: image }, () => {}, false);
|
||||
avImage.trigger('click');
|
||||
avImage.trigger('touchstart');
|
||||
avImage.trigger('touchend');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
|
||||
expect(document.body.style.overflow).to.equal('hidden');
|
||||
done();
|
||||
}, 500);
|
||||
}, 500);
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 0, 0);
|
||||
triggerTouch(wrapper, 'touchend', 0, 0);
|
||||
expect(wrapper.vm.value).to.be.false;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user