From a4bebfbb8d9f430684ab05961e7a98a04144cb79 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 2 Oct 2018 21:24:25 +0800
Subject: [PATCH] [improvement] ImagePreview: add show-index prop (#1889)

---
 packages/card/index.vue                       |  5 +++
 packages/dialog/{dialog.vue => Dialog.vue}    |  0
 packages/dialog/index.js                      |  2 +-
 packages/dialog/test/index.spec.js            |  2 +-
 .../{image-preview.vue => ImagePreview.vue}   | 38 ++++++++++++++++++-
 packages/image-preview/demo/index.vue         |  8 ++--
 packages/image-preview/en-US.md               | 11 +++---
 packages/image-preview/index.js               |  7 ++--
 .../test/__snapshots__/index.spec.js.snap     |  1 +
 packages/image-preview/test/index.spec.js     |  2 +-
 packages/image-preview/zh-CN.md               | 11 +++---
 packages/toast/{toast.vue => Toast.vue}       |  0
 packages/toast/index.js                       |  2 +-
 packages/vant-css/src/image-preview.css       | 14 +++++++
 types/image-preview.d.ts                      |  2 +
 15 files changed, 84 insertions(+), 21 deletions(-)
 rename packages/dialog/{dialog.vue => Dialog.vue} (100%)
 rename packages/image-preview/{image-preview.vue => ImagePreview.vue} (66%)
 rename packages/toast/{toast.vue => Toast.vue} (100%)

diff --git a/packages/card/index.vue b/packages/card/index.vue
index 889033a4b..5843026cf 100644
--- a/packages/card/index.vue
+++ b/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,
diff --git a/packages/dialog/dialog.vue b/packages/dialog/Dialog.vue
similarity index 100%
rename from packages/dialog/dialog.vue
rename to packages/dialog/Dialog.vue
diff --git a/packages/dialog/index.js b/packages/dialog/index.js
index c2b4e6d39..489a59c95 100644
--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import VanDialog from './dialog';
+import VanDialog from './Dialog';
 
 let instance;
 
diff --git a/packages/dialog/test/index.spec.js b/packages/dialog/test/index.spec.js
index 7b22b10cc..539d4b7bf 100644
--- a/packages/dialog/test/index.spec.js
+++ b/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();
diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/ImagePreview.vue
similarity index 66%
rename from packages/image-preview/image-preview.vue
rename to packages/image-preview/ImagePreview.vue
index 60798ebbf..cd4cdc207 100644
--- a/packages/image-preview/image-preview.vue
+++ b/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;
     }
   }
 });
diff --git a/packages/image-preview/demo/index.vue b/packages/image-preview/demo/index.vue
index c27250a38..e1c78e080 100644
--- a/packages/image-preview/demo/index.vue
+++ b/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/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-  'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+  'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+  'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+  '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;
diff --git a/packages/image-preview/en-US.md b/packages/image-preview/en-US.md
index deee64bf4..88c7995fc 100644
--- a/packages/image-preview/en-US.md
+++ b/packages/image-preview/en-US.md
@@ -47,8 +47,9 @@ setTimeout(() => {
 
 ### Arguments
 
-| Attribute | Description | Type |
-|-----------|-----------|-----------|
-| images | Images URL list | `Array` |
-| startPosition | Start position | `Number` |
-| onClose | Close callback | `Function` |
+| Attribute | Description | Type | Default |
+|-----------|-----------|-----------|-----------|
+| images | Images URL list | `Array` | `[]` |
+| startPosition | Start position | `Number` | `0` |
+| showIndex | Whether to show index | `Boolean` | `true` |
+| onClose | Close callback | `Function` | - |
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index 225492dfe..d3eb01bfa 100644
--- a/packages/image-preview/index.js
+++ b/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) {
diff --git a/packages/image-preview/test/__snapshots__/index.spec.js.snap b/packages/image-preview/test/__snapshots__/index.spec.js.snap
index c22917c90..863d00bb0 100644
--- a/packages/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/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%;">
diff --git a/packages/image-preview/test/index.spec.js b/packages/image-preview/test/index.spec.js
index 7c2620924..af99f4e28 100644
--- a/packages/image-preview/test/index.spec.js
+++ b/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 = [
diff --git a/packages/image-preview/zh-CN.md b/packages/image-preview/zh-CN.md
index 03572504a..35c2390c9 100644
--- a/packages/image-preview/zh-CN.md
+++ b/packages/image-preview/zh-CN.md
@@ -55,11 +55,12 @@ setTimeout(() => {
 
 ### 配置项
 
-| 参数名 | 说明 | 类型 |
-|-----------|-----------|-----------|
-| images | 需要预览的图片 URL 数组 | `Array` |
-| startPosition | 图片预览起始位置索引 | `Number` |
-| onClose | 关闭时的回调函数 | `Function` |
+| 参数名 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-----------|
+| images | 需要预览的图片 URL 数组 | `Array` | `[]` | 
+| startPosition | 图片预览起始位置索引 | `Number` | `0` |
+| showIndex | 是否显示页码 | `Boolean` | `true` |
+| onClose | 关闭时的回调函数 | `Function` | - |
 
 ### 更新日志
 
diff --git a/packages/toast/toast.vue b/packages/toast/Toast.vue
similarity index 100%
rename from packages/toast/toast.vue
rename to packages/toast/Toast.vue
diff --git a/packages/toast/index.js b/packages/toast/index.js
index 904707008..29bf3bdbf 100644
--- a/packages/toast/index.js
+++ b/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 = {
diff --git a/packages/vant-css/src/image-preview.css b/packages/vant-css/src/image-preview.css
index 07f49603d..5a518cb44 100644
--- a/packages/vant-css/src/image-preview.css
+++ b/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%;
   }
diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts
index 7745167cb..703e3de8c 100644
--- a/types/image-preview.d.ts
+++ b/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;
 }