feat(ImagePreview): add cover slot (#4766)

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>
     );

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
 

src/image-preview/README.zh-CN.md

@@ -152,6 +152,7 @@ export default {
 | 名称 | 说明 |
 |------|------|
 | index | 自定义页码内容 |
+| cover | 自定义覆盖在图片预览上方的内容 |
 
 ### onClose 回调参数
 

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);
   }
 

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>
 `;

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>
     `
   });