Skip to content

Commit a4bebfb

Browse files
chenjiahanchenjiahan
authored
[improvement] ImagePreview: add show-index prop (youzan#1889)
1 parent 8bd447a commit a4bebfb

15 files changed

Lines changed: 83 additions & 20 deletions

File tree

‎packages/card/index.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,16 @@
3535
</template>
3636

3737
<script>
38+
import VanTag from '../tag';
3839
import create from '../utils/create';
3940
4041
export default create({
4142
name: 'card',
4243
44+
components: {
45+
VanTag
46+
},
47+
4348
props: {
4449
tag: String,
4550
desc: String,

packages/dialog/dialog.vue renamed to packages/dialog/Dialog.vue

File renamed without changes.

‎packages/dialog/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue';
2-
import VanDialog from './dialog';
2+
import VanDialog from './Dialog';
33

44
let instance;
55

‎packages/dialog/test/index.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue';
22
import Dialog from '..';
3-
import DialogVue from '../dialog';
3+
import DialogVue from '../Dialog';
44
import { mount, later, transitionStub } from '../../../test/utils';
55

66
transitionStub();

packages/image-preview/image-preview.vue renamed to packages/image-preview/ImagePreview.vue

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
@touchend="onTouchEnd"
77
@touchcancel="onTouchEnd"
88
>
9-
<swipe :initial-swipe="startPosition" ref="swipe">
9+
<div v-if="showIndex" :class="b('index')">{{ active + 1 }}/{{ count }}</div>
10+
<swipe
11+
ref="swipe"
12+
:initial-swipe="startPosition"
13+
:show-indicators="false"
14+
@change="onChange"
15+
>
1016
<swipe-item v-for="(item, index) in images" :key="index">
1117
<img :class="b('image')" :src="item" >
1218
</swipe-item>
@@ -43,12 +49,38 @@ export default create({
4349
type: Boolean,
4450
default: true
4551
},
52+
showIndex: {
53+
type: Boolean,
54+
default: true
55+
},
56+
overlayClass: {
57+
type: String,
58+
default: 'van-image-preview__overlay'
59+
},
4660
closeOnClickOverlay: {
4761
type: Boolean,
4862
default: true
4963
}
5064
},
5165
66+
data() {
67+
return {
68+
active: this.startPosition
69+
};
70+
},
71+
72+
computed: {
73+
count() {
74+
return this.images.length;
75+
}
76+
},
77+
78+
watch: {
79+
startPosition(active) {
80+
this.active = active;
81+
}
82+
},
83+
5284
methods: {
5385
onTouchStart() {
5486
this.touchStartTime = new Date();
@@ -64,6 +96,10 @@ export default create({
6496
if (deltaTime < 500 && offsetX < 10 && offsetY < 10) {
6597
this.$emit('input', false);
6698
}
99+
},
100+
101+
onChange(active) {
102+
this.active = active;
67103
}
68104
}
69105
});

‎packages/image-preview/demo/index.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@
1818
import { ImagePreview } from '../../../packages';
1919
2020
const images = [
21-
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
22-
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
23-
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
21+
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
22+
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
23+
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
24+
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
2425
];
2526
2627
export default {
@@ -60,6 +61,7 @@ export default {
6061
margin-left: 15px;
6162
}
6263
}
64+
6365
.van-image-preview {
6466
img {
6567
pointer-events: none;

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,9 @@ setTimeout(() => {
4747

4848
### Arguments
4949

50-
| Attribute | Description | Type |
51-
|-----------|-----------|-----------|
52-
| images | Images URL list | `Array` |
53-
| startPosition | Start position | `Number` |
54-
| onClose | Close callback | `Function` |
50+
| Attribute | Description | Type | Default |
51+
|-----------|-----------|-----------|-----------|
52+
| images | Images URL list | `Array` | `[]` |
53+
| startPosition | Start position | `Number` | `0` |
54+
| showIndex | Whether to show index | `Boolean` | `true` |
55+
| onClose | Close callback | `Function` | - |

‎packages/image-preview/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue';
2-
import VueImagePreview from './image-preview';
2+
import VueImagePreview from './ImagePreview';
33

44
let instance;
55

@@ -17,9 +17,10 @@ const ImagePreview = (images, startPosition) => {
1717

1818
const config = Array.isArray(images) ? { images, startPosition } : images;
1919

20+
instance.value = true;
2021
instance.images = config.images;
22+
instance.showIndex = config.showIndex || true;
2123
instance.startPosition = config.startPosition || 0;
22-
instance.value = true;
2324
instance.$on('input', show => {
2425
instance.value = show;
2526
if (!show) {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
exports[`render image 1`] = `
44
<div class="van-image-preview">
5+
<div class="van-image-preview__index">1/3</div>
56
<div class="van-swipe">
67
<div class="van-swipe__track" style="width: 0px;">
78
<div class="van-swipe-item" style="width: 0px; height: 100%;">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue';
22
import ImagePreview from '..';
3-
import ImagePreviewVue from '../image-preview';
3+
import ImagePreviewVue from '../ImagePreview';
44
import { mount, triggerDrag } from '../../../test/utils';
55

66
const images = [

0 commit comments

Comments
 (0)