Skip to content

Commit fbd751a

Browse files
chenjiahanchenjiahan
authored
[new feature] ImagePreview: add onChange option (youzan#3630)
1 parent 045c756 commit fbd751a

7 files changed

Lines changed: 64 additions & 13 deletions

File tree

‎packages/image-preview/ImagePreview.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export default sfc({
228228
}
229229
},
230230

231-
onChange(active) {
231+
onSwipeChange(active) {
232232
this.resetScale();
233233
this.active = active;
234234
this.$emit('change', active);
@@ -261,7 +261,7 @@ export default sfc({
261261
indicatorColor="white"
262262
initialSwipe={this.startPosition}
263263
showIndicators={this.showIndicators}
264-
onChange={this.onChange}
264+
onChange={this.onSwipeChange}
265265
>
266266
{images.map((image, index) => {
267267
const props = {

‎packages/image-preview/en-US.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,8 @@ export default {
9494
| showIndex | Whether to show index | `Boolean` | `true` |
9595
| showIndicators | Whether to show indicators | `Boolean` | `false` |
9696
| loop | Whether to enable loop | `Boolean` | `true` |
97-
| onClose | Close callback | `Function` | - |
97+
| onClose | Triggered when close | `Function` | - |
98+
| onChange | Triggered when current image change | `Function` | - |
9899
| closeOnPopstate | Whether to close when popstate | `Boolean` | `false` |
99100
| asyncClose | Whether to enable async close | `Boolean` | `false` |
100101
| className | Custom className | `String | Array | Object` | - |

‎packages/image-preview/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ const initInstance = () => {
2424
el: document.createElement('div')
2525
});
2626
document.body.appendChild(instance.$el);
27+
28+
instance.$on('change', index => {
29+
if (instance.onChange) {
30+
instance.onChange(index);
31+
}
32+
});
2733
};
2834

2935
const ImagePreview = (images, startPosition = 0) => {

‎packages/image-preview/test/__snapshots__/index.spec.js.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,19 @@ exports[`index slot 1`] = `
99
</div>
1010
`;
1111

12+
exports[`lazy-load prop 1`] = `
13+
<div class="van-image-preview" name="van-fade">
14+
<div class="van-image-preview__index">1/3</div>
15+
<div class="van-swipe">
16+
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
17+
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img class="van-image-preview__image" style="transition: .3s all;"></div>
18+
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img class="van-image-preview__image"></div>
19+
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img class="van-image-preview__image"></div>
20+
</div>
21+
</div>
22+
</div>
23+
`;
24+
1225
exports[`render image 1`] = `
1326
<div class="van-image-preview" name="van-fade">
1427
<div class="van-image-preview__index">1/3</div>

‎packages/image-preview/test/index.spec.js‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue';
22
import ImagePreview from '..';
33
import ImagePreviewVue from '../ImagePreview';
4-
import { mount, trigger, triggerDrag, transitionStub } from '../../../test/utils';
4+
import { mount, trigger, triggerDrag, transitionStub, later } from '../../../test/utils';
55

66
transitionStub();
77

@@ -64,7 +64,7 @@ test('function call', done => {
6464
});
6565
});
6666

67-
test('function call options', done => {
67+
test('onClose option', async done => {
6868
const onClose = jest.fn();
6969
const instance = ImagePreview({
7070
images,
@@ -75,14 +75,28 @@ test('function call options', done => {
7575
instance.$emit('input', true);
7676
expect(onClose).toHaveBeenCalledTimes(0);
7777

78-
Vue.nextTick(() => {
79-
const wrapper = document.querySelector('.van-image-preview');
80-
const swipe = wrapper.querySelector('.van-swipe__track');
81-
triggerDrag(swipe, 0, 0);
82-
expect(onClose).toHaveBeenCalledTimes(1);
83-
expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' });
84-
done();
78+
await later();
79+
80+
const wrapper = document.querySelector('.van-image-preview');
81+
const swipe = wrapper.querySelector('.van-swipe__track');
82+
triggerDrag(swipe, 0, 0);
83+
expect(onClose).toHaveBeenCalledTimes(1);
84+
expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' });
85+
done();
86+
});
87+
88+
test('onChange option', async done => {
89+
const instance = ImagePreview({
90+
images,
91+
startPostion: 0,
92+
onChange(index) {
93+
expect(index).toEqual(2);
94+
done();
95+
}
8596
});
97+
98+
const swipe = instance.$el.querySelector('.van-swipe__track');
99+
triggerDrag(swipe, 1000, 0);
86100
});
87101

88102
test('register component', () => {
@@ -137,3 +151,18 @@ test('closeOnPopstate', () => {
137151
trigger(window, 'popstate');
138152
expect(wrapper.emitted('input')[1]).toBeFalsy();
139153
});
154+
155+
test('lazy-load prop', () => {
156+
const wrapper = mount(ImagePreviewVue, {
157+
propsData: {
158+
images,
159+
lazyLoad: true
160+
}
161+
});
162+
163+
wrapper.setProps({
164+
value: true
165+
});
166+
167+
expect(wrapper).toMatchSnapshot();
168+
});

‎packages/image-preview/zh-CN.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export default {
107107
| showIndicators | 是否显示轮播指示器 | `Boolean` | `false` | 1.3.10 |
108108
| loop | 是否开启循环播放 | `Boolean` | `true` | 1.4.4 |
109109
| onClose | 关闭时的回调函数 | `Function` | - | 1.1.16 |
110+
| onChange | 切换图片时的回调函数，回调参数为当前索引 | `Function` | - | 2.0.3 |
110111
| asyncClose | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 |
111112
| closeOnPopstate | 是否在页面回退时自动关闭 | `Boolean` | `false` | 2.0.0 |
112113
| className | 自定义类名 | `String | Array | Object` | - | 1.5.2 |

‎types/image-preview.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ export type ImagePreviewOptions = string[] | {
1212
asyncClose?: boolean;
1313
showIndicators?: boolean;
1414
closeOnPopstate?: boolean;
15-
onClose?: () => any;
15+
onClose?: () => void;
16+
onChange?: (index: number) => void;
1617
};
1718

1819
export class VanImagePreview extends VanPopupMixin {

0 commit comments

Comments
 (0)