mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
fix(ImagePreview): scale event param
This commit is contained in:
parent
2d89a6ed9a
commit
e93bec677e
@ -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}
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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', () => {
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user