From dc964ac068b59c7cccec9297582e4a0bc72736e8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 18 Oct 2019 10:30:19 +0800
Subject: [PATCH] feat(ImagePreview): add cover slot (#4766)

---
 src/image-preview/ImagePreview.js                | 11 ++++++++++-
 src/image-preview/README.md                      |  1 +
 src/image-preview/README.zh-CN.md                |  1 +
 src/image-preview/index.less                     |  7 ++++++-
 .../test/__snapshots__/index.spec.js.snap        | 16 +++++++++++++---
 src/image-preview/test/index.spec.js             | 14 +++++++++++++-
 6 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index bc9cabfe1..a9aa9fd5d 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -249,12 +249,20 @@ export default createComponent({
       if (this.showIndex) {
         return (
           <div class={bem('index')}>
-            {this.slots('index') || `${this.active + 1}/${this.images.length}`}
+            {this.slots('index') || `${this.active + 1} / ${this.images.length}`}
           </div>
         );
       }
     },
 
+    genCover() {
+      const cover = this.slots('cover');
+
+      if (cover) {
+        return <div class={bem('cover')}>{cover}</div>;
+      }
+    },
+
     genImages() {
       const imageSlots = {
         loading: () => <Loading type="spinner" />
@@ -306,6 +314,7 @@ export default createComponent({
         <div class={[bem(), this.className]}>
           {this.genImages()}
           {this.genIndex()}
+          {this.genCover()}
         </div>
       </transition>
     );
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 63f34a987..ca29f9631 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -134,6 +134,7 @@ export default {
 | Name | Description |
 |------|------|
 | index | Custom index |
+| cover | Custom content that covers the image preview |
 
 ### onClose Parematers
 
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index b7645f24c..ad43ed903 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -152,6 +152,7 @@ export default {
 | 名称 | 说明 |
 |------|------|
 | index | 自定义页码内容 |
+| cover | 自定义覆盖在图片预览上方的内容 |
 
 ### onClose 回调参数
 
diff --git a/src/image-preview/index.less b/src/image-preview/index.less
index 022fd41ba..cbf4e907b 100644
--- a/src/image-preview/index.less
+++ b/src/image-preview/index.less
@@ -11,6 +11,12 @@
     height: 100%;
   }
 
+  &__cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
   &__image {
     position: absolute;
     top: 0;
@@ -30,7 +36,6 @@
     left: 50%;
     color: @image-preview-index-text-color;
     font-size: @image-preview-index-font-size;
-    letter-spacing: 2px;
     transform: translate(-50%, 0);
   }
 
diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index 103ab48fc..33286063b 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`cover slot 1`] = `
+<div class="van-image-preview" name="van-fade">
+  <div class="van-swipe van-image-preview__swipe">
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+  </div>
+  <div class="van-image-preview__index">1 / 0</div>
+  <div class="van-image-preview__cover">Custom Cover Content</div>
+</div>
+`;
+
 exports[`index slot 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
@@ -36,7 +46,7 @@ exports[`lazy-load prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-image-preview__index">1/3</div>
+  <div class="van-image-preview__index">1 / 3</div>
 </div>
 `;
 
@@ -67,7 +77,7 @@ exports[`render image 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-image-preview__index">1/3</div>
+  <div class="van-image-preview__index">1 / 3</div>
 </div>
 `;
 
@@ -106,6 +116,6 @@ exports[`zoom 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-image-preview__index">1/3</div>
+  <div class="van-image-preview__index">1 / 3</div>
 </div>
 `;
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index 2282f815c..48518429c 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -151,7 +151,19 @@ test('index slot', () => {
   const wrapper = mount({
     template: `
       <van-image-preview :value="true">
-        <template v-slot:index>Custom Index</template>
+        <template #index>Custom Index</template>
+      </van-image-preview>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('cover slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-image-preview :value="true">
+        <template #cover>Custom Cover Content</template>
       </van-image-preview>
     `
   });