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,
moving: false,
zooming: false,
active: 0
active: 0,
doubleClickTimer: null
};
},
@ -120,16 +121,26 @@ export default createComponent({
// prevent long tap to close component
if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
const index = this.active;
if (!this.doubleClickTimer) {
this.doubleClickTimer = setTimeout(() => {
const index = this.active;
this.resetScale();
this.$emit('close', {
index,
url: this.images[index]
});
this.resetScale();
this.$emit('close', {
index,
url: this.images[index]
});
if (!this.asyncClose) {
this.$emit('input', false);
if (!this.asyncClose) {
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.moveX = 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'
];
test('render image', () => {
test('render image', async () => {
const wrapper = mount(ImagePreviewVue, {
propsData: { images, value: true }
});
@ -31,6 +31,9 @@ test('render image', () => {
triggerDrag(swipe, 500, 0);
expect(wrapper.emitted('input')).toBeFalsy();
triggerDrag(swipe, 0, 0);
await later(300);
expect(wrapper.emitted('input')[0][0]).toBeFalsy();
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 => {
const onClose = jest.fn();
const instance = ImagePreview({
@ -75,7 +94,7 @@ test('onClose option', async done => {
instance.$emit('input', true);
expect(onClose).toHaveBeenCalledTimes(0);
await later();
await later(300);
const wrapper = document.querySelector('.van-image-preview');
const swipe = wrapper.querySelector('.van-swipe__track');