fix(ImagePreview): scale event param

This commit is contained in:
chenjiahan 2020-06-30 14:56:56 +08:00 committed by neverland
parent 2d89a6ed9a
commit e93bec677e
6 changed files with 32 additions and 20 deletions

View File

@ -147,6 +147,7 @@ export default createComponent({
{this.images.map((image) => (
<ImagePreviewItem
src={image}
active={this.active}
maxZoom={this.maxZoom}
minZoom={this.minZoom}
onScale={this.emitScale}

View File

@ -25,6 +25,7 @@ export default {
props: {
src: String,
active: Number,
minZoom: [Number, String],
maxZoom: [Number, String],
},
@ -60,8 +61,7 @@ export default {
},
methods: {
startMove(event) {
this.touchStart(event);
startMove() {
this.setMaxMove();
this.moving = true;
this.startMoveX = this.moveX;
@ -80,6 +80,9 @@ export default {
if (this.displayWidth && this.displayHeight) {
this.maxMoveX = Math.max(0, (displayWidth * scale - windowWidth) / 2);
this.maxMoveY = Math.max(0, (displayHeight * scale - windowHeight) / 2);
} else {
this.maxMoveX = 0;
this.maxMoveY = 0;
}
},
@ -109,10 +112,11 @@ export default {
const { touches } = event;
const { offsetX = 0 } = this;
this.touchStart(event);
this.touchStartTime = new Date();
if (touches.length === 1 && this.scale !== 1) {
this.startMove(event);
this.startMove();
} else if (touches.length === 2 && !offsetX) {
this.startZoom(event);
}

View File

@ -61,7 +61,7 @@ exports[`set show-index prop to false 1`] = `
`;
exports[`zoom 1`] = `
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);" data-index="0"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>

View File

@ -27,15 +27,14 @@ test('render image', async () => {
await later();
const swipe = wrapper.find('.van-swipe__track');
const swipe = wrapper.find('.van-swipe-item');
triggerDrag(swipe, 500, 0);
expect(wrapper.emitted('input')).toBeFalsy();
triggerDrag(swipe, 0, 0);
await later(250);
expect(wrapper.emitted('input')[0][0]).toBeFalsy();
expect(wrapper.emitted('change')[0][0]).toEqual(2);
triggerDrag(swipe, 0, 0);
await later(250);
expect(wrapper.emitted('input')[0][0]).toEqual(false);
});
test('closeable prop', () => {
@ -116,21 +115,29 @@ test('function call', (done) => {
});
});
test('double click', async (done) => {
const instance = ImagePreview(images);
test('double click', async () => {
const onScale = jest.fn();
const instance = ImagePreview({
images,
onScale,
});
await later();
const swipe = instance.$el.querySelector('.van-swipe__track');
const swipe = instance.$el.querySelector('.van-swipe-item');
triggerDrag(swipe, 0, 0);
triggerDrag(swipe, 0, 0);
expect(instance.scale).toEqual(2);
expect(onScale).toHaveBeenCalledWith({
index: 0,
scale: 2,
});
await later();
triggerDrag(swipe, 0, 0);
triggerDrag(swipe, 0, 0);
expect(instance.scale).toEqual(1);
done();
expect(onScale).toHaveBeenLastCalledWith({
index: 0,
scale: 1,
});
});
test('onClose option', () => {

View File

@ -450,7 +450,7 @@ test('close-preview event', async () => {
wrapper.find('.van-image').trigger('click');
const preview = document.querySelector('.van-image-preview');
const swipe = preview.querySelector('.van-swipe__track');
const swipe = preview.querySelector('.van-swipe-item');
triggerDrag(swipe, 0, 0);
await later(300);

View File

@ -20,8 +20,8 @@ function getTouch(el: HTMLElement | Window, x: number, y: number) {
export function trigger(
wrapper: Wrapper<Vue> | HTMLElement | Window,
eventName: string,
x: number = 0,
y: number = 0,
x = 0,
y = 0,
options: any = {}
) {
const el = 'element' in wrapper ? wrapper.element : wrapper;