[improvement] ImagePreview: add show-index prop (#1889)

packages/card/index.vue

@@ -35,11 +35,16 @@
 </template>
 
 <script>
+import VanTag from '../tag';
 import create from '../utils/create';
 
 export default create({
   name: 'card',
 
+  components: {
+    VanTag
+  },
+
   props: {
     tag: String,
     desc: String,

packages/dialog/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import VanDialog from './dialog';
+import VanDialog from './Dialog';
 
 let instance;
 

packages/dialog/test/index.spec.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Dialog from '..';
-import DialogVue from '../dialog';
+import DialogVue from '../Dialog';
 import { mount, later, transitionStub } from '../../../test/utils';
 
 transitionStub();

packages/image-preview/ImagePreview.vue

@@ -6,7 +6,13 @@
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <swipe :initial-swipe="startPosition" ref="swipe">
+    <div v-if="showIndex" :class="b('index')">{{ active + 1 }}/{{ count }}</div>
+    <swipe
+      ref="swipe"
+      :initial-swipe="startPosition"
+      :show-indicators="false"
+      @change="onChange"
+    >
       <swipe-item v-for="(item, index) in images" :key="index">
         <img :class="b('image')" :src="item" >
       </swipe-item>
@@ -43,12 +49,38 @@ export default create({
       type: Boolean,
       default: true
     },
+    showIndex: {
+      type: Boolean,
+      default: true
+    },
+    overlayClass: {
+      type: String,
+      default: 'van-image-preview__overlay'
+    },
     closeOnClickOverlay: {
       type: Boolean,
       default: true
     }
   },
 
+  data() {
+    return {
+      active: this.startPosition
+    };
+  },
+
+  computed: {
+    count() {
+      return this.images.length;
+    }
+  },
+
+  watch: {
+    startPosition(active) {
+      this.active = active;
+    }
+  },
+
   methods: {
     onTouchStart() {
       this.touchStartTime = new Date();
@@ -64,6 +96,10 @@ export default create({
       if (deltaTime < 500 && offsetX < 10 && offsetY < 10) {
         this.$emit('input', false);
       }
+    },
+
+    onChange(active) {
+      this.active = active;
     }
   }
 });

packages/image-preview/demo/index.vue

@@ -18,9 +18,10 @@
 import { ImagePreview } from '../../../packages';
 
 const images = [
-  'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
+  'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
-  'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+  'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
-  'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+  'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+  'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
 ];
 
 export default {
@@ -60,6 +61,7 @@ export default {
     margin-left: 15px;
   }
 }
+
 .van-image-preview {
   img {
     pointer-events: none;

packages/image-preview/en-US.md

@@ -47,8 +47,9 @@ setTimeout(() => {
 
 ### Arguments
 
-| Attribute | Description | Type |
+| Attribute | Description | Type | Default |
-|-----------|-----------|-----------|
+|-----------|-----------|-----------|-----------|
-| images | Images URL list | `Array` |
+| images | Images URL list | `Array` | `[]` |
-| startPosition | Start position | `Number` |
+| startPosition | Start position | `Number` | `0` |
-| onClose | Close callback | `Function` |
+| showIndex | Whether to show index | `Boolean` | `true` |
+| onClose | Close callback | `Function` | - |

packages/image-preview/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import VueImagePreview from './image-preview';
+import VueImagePreview from './ImagePreview';
 
 let instance;
 
@@ -17,9 +17,10 @@ const ImagePreview = (images, startPosition) => {
 
   const config = Array.isArray(images) ? { images, startPosition } : images;
 
-  instance.images = config.images;
-  instance.startPosition = config.startPosition || 0;
   instance.value = true;
+  instance.images = config.images;
+  instance.showIndex = config.showIndex || true;
+  instance.startPosition = config.startPosition || 0;
   instance.$on('input', show => {
     instance.value = show;
     if (!show) {

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

@@ -2,6 +2,7 @@
 
 exports[`render image 1`] = `
 <div class="van-image-preview">
+  <div class="van-image-preview__index">1/3</div>
   <div class="van-swipe">
     <div class="van-swipe__track" style="width: 0px;">
       <div class="van-swipe-item" style="width: 0px; height: 100%;">

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

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import ImagePreview from '..';
-import ImagePreviewVue from '../image-preview';
+import ImagePreviewVue from '../ImagePreview';
 import { mount, triggerDrag } from '../../../test/utils';
 
 const images = [

packages/image-preview/zh-CN.md

@@ -55,11 +55,12 @@ setTimeout(() => {
 
 ### 配置项
 
-| 参数名 | 说明 | 类型 |
+| 参数名 | 说明 | 类型 | 默认值 |
-|-----------|-----------|-----------|
+|-----------|-----------|-----------|-----------|
-| images | 需要预览的图片 URL 数组 | `Array` |
+| images | 需要预览的图片 URL 数组 | `Array` | `[]` | 
-| startPosition | 图片预览起始位置索引 | `Number` |
+| startPosition | 图片预览起始位置索引 | `Number` | `0` |
-| onClose | 关闭时的回调函数 | `Function` |
+| showIndex | 是否显示页码 | `Boolean` | `true` |
+| onClose | 关闭时的回调函数 | `Function` | - |
 
 ### 更新日志
 

packages/toast/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import VueToast from './toast';
+import VueToast from './Toast';
 import { isObj } from '../utils';
 
 const defaultOptions = {

packages/vant-css/src/image-preview.css

@@ -18,6 +18,20 @@
     position: absolute;
   }
 
+  &__index {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    color: $white;
+    font-size: 14px;
+    letter-spacing: 2px;
+    transform: translate(-50%, 0);
+  }
+
+  &__overlay {
+    background-color: rgba(0, 0, 0, .9);
+  }
+
   .van-swipe {
     height: 100%;
   }

types/image-preview.d.ts

@@ -3,11 +3,13 @@ import { VanPopupMixin } from './mixins/popup';
 export type ImagePreviewOptions = string[] | {
   images: string[];
   startPosition?: number;
+  showIndex?: boolean;
   onClose?: () => any;
 };
 
 export class VanImagePreview extends VanPopupMixin {
   images: string[];
+  showIndex: boolean;
   startPosition: number;
 }