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

[improvement] ImagePreview: support dbclick zoom (#3839)

Browse Source
This commit is contained in:
cesc fabregas 2019-07-14 14:07:52 +08:00 committed by neverland
parent 7b9331aee4
commit f50dc30484
2 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/image-preview/ImagePreview.js
View File

@ -77,7 +77,8 @@ export default createComponent({
moveY: 0, moveY: 0,
moving: false, moving: false,
zooming: false, zooming: false,
active: 0 active: 0,
doubleClickTimer: null
}; };
}, },
@ -120,16 +121,26 @@ export default createComponent({
// prevent long tap to close component // prevent long tap to close component
if (deltaTime < 300 && offsetX < 10 && offsetY < 10) { if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
const index = this.active; if (!this.doubleClickTimer) {
this.doubleClickTimer = setTimeout(() => {
const index = this.active;
this.resetScale(); this.resetScale();
this.$emit('close', { this.$emit('close', {
index, index,
url: this.images[index] url: this.images[index]
}); });
if (!this.asyncClose) { if (!this.asyncClose) {
this.$emit('input', false); this.$emit('input', false);
}
this.doubleClickTimer = null;
}, 300);
} else {
clearTimeout(this.doubleClickTimer);
this.doubleClickTimer = null;
this.toggleScale();
} }
} }
}, },
@ -228,6 +239,14 @@ export default createComponent({
this.scale = 1; this.scale = 1;
this.moveX = 0; this.moveX = 0;
this.moveY = 0; this.moveY = 0;
},
toggleScale() {
const scale = this.scale > 1 ? 1 : 2;
this.scale = scale;
this.moveX = 0;
this.moveY = 0;
} }
}, },

23
src/image-preview/test/index.spec.js
View File

@ -20,7 +20,7 @@ const images = [
'https://img.yzcdn.cn/3.png' 'https://img.yzcdn.cn/3.png'
]; ];
test('render image', () => { test('render image', async () => {
const wrapper = mount(ImagePreviewVue, { const wrapper = mount(ImagePreviewVue, {
propsData: { images, value: true } propsData: { images, value: true }
}); });
@ -31,6 +31,9 @@ test('render image', () => {
triggerDrag(swipe, 500, 0); triggerDrag(swipe, 500, 0);
expect(wrapper.emitted('input')).toBeFalsy(); expect(wrapper.emitted('input')).toBeFalsy();
triggerDrag(swipe, 0, 0); triggerDrag(swipe, 0, 0);
await later(300);
expect(wrapper.emitted('input')[0][0]).toBeFalsy(); expect(wrapper.emitted('input')[0][0]).toBeFalsy();
expect(wrapper.emitted('change')[0][0]).toEqual(2); expect(wrapper.emitted('change')[0][0]).toEqual(2);
}); });
@ -64,6 +67,22 @@ test('function call', done => {
}); });
}); });
test('double click', async done => {
const instance = ImagePreview(images);
const swipe = instance.$el.querySelector('.van-swipe__track');
triggerDrag(swipe, 0, 0);
triggerDrag(swipe, 0, 0);
expect(instance.scale).toEqual(2);
await later();
triggerDrag(swipe, 0, 0);
triggerDrag(swipe, 0, 0);
expect(instance.scale).toEqual(1);
done();
});
test('onClose option', async done => { test('onClose option', async done => {
const onClose = jest.fn(); const onClose = jest.fn();
const instance = ImagePreview({ const instance = ImagePreview({
@ -75,7 +94,7 @@ test('onClose option', async done => {
instance.$emit('input', true); instance.$emit('input', true);
expect(onClose).toHaveBeenCalledTimes(0); expect(onClose).toHaveBeenCalledTimes(0);
await later(); await later(300);
const wrapper = document.querySelector('.van-image-preview'); const wrapper = document.querySelector('.van-image-preview');
const swipe = wrapper.querySelector('.van-swipe__track'); const swipe = wrapper.querySelector('.van-swipe__track');