[new feature] ImagePreview: add index slot (youzan#3157)

Author: chenjiahan

packages/image-preview/ImagePreview.js

@@ -8,7 +8,10 @@ const [sfc, bem] = use('image-preview');
 
 function getDistance(touches) {
   return Math.sqrt(
-    Math.abs((touches[0].clientX - touches[1].clientX) * (touches[0].clientY - touches[1].clientY))
+    Math.abs(
+      (touches[0].clientX - touches[1].clientX) *
+        (touches[0].clientY - touches[1].clientY)
+    )
   );
 }
 
@@ -71,8 +74,8 @@ export default sfc({
       };
 
       if (scale !== 1) {
-        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this.moveX / scale}px, ${this
-          .moveY / scale}px)`;
+        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this.moveX /
+          scale}px, ${this.moveY / scale}px)`;
       }
 
       return style;
@@ -175,7 +178,11 @@ export default sfc({
       if (this.moving || this.zooming) {
         let stopPropagation = true;
 
-        if (this.moving && this.startMoveX === this.moveX && this.startMoveY === this.moveY) {
+        if (
+          this.moving &&
+          this.startMoveX === this.moveX &&
+          this.startMoveY === this.moveY
+        ) {
           stopPropagation = false;
         }
 
@@ -219,7 +226,9 @@ export default sfc({
     const { active, images } = this;
 
     const Index = this.showIndex && (
-      <div class={bem('index')}>{`${active + 1}/${images.length}`}</div>
+      <div class={bem('index')}>
+        {this.slots('index') || `${active + 1}/${images.length}`}
+      </div>
     );
 
     const Images = (
@@ -244,7 +253,11 @@ export default sfc({
           };
           return (
             <SwipeItem>
-              {this.lazyLoad ? <img vLazy={image} {...props} /> : <img src={image} {...props} />}
+              {this.lazyLoad ? (
+                <img vLazy={image} {...props} />
+              ) : (
+                <img src={image} {...props} />
+              )}
             </SwipeItem>
           );
         })}

packages/image-preview/demo/index.vue

@@ -17,7 +17,10 @@
       <van-image-preview
         v-model="show"
         :images="images"
-      />
+        @change="onChange"
+      >
+        <template v-slot:index>{{ $t('index', index) }}</template>
+      </van-image-preview>
     </demo-block>
   </demo-section>
 </template>
@@ -38,20 +41,23 @@ export default {
       button1: '预览图片',
       button2: '指定初始位置',
       button3: '异步关闭',
-      componentCall: '组件调用'
+      componentCall: '组件调用',
+      index: index => `第${index + 1}页`
     },
     'en-US': {
       button1: 'Show Images',
       button2: 'Custom Start Position',
       button3: 'Async Close',
-      componentCall: 'Component Call'
+      componentCall: 'Component Call',
+      index: index => `Page: ${index}`
     }
   },
 
   data() {
     return {
       show: false,
-      images
+      images,
+      index: 0
     };
   },
 
@@ -60,6 +66,10 @@ export default {
       this.show = true;
     },
 
+    onChange(index) {
+      this.index = index;
+    },
+
     showImagePreview(position, timer) {
       const instance = ImagePreview({
         images,

packages/image-preview/en-US.md

@@ -56,19 +56,29 @@ setTimeout(() => {
 <van-image-preview
   v-model="show"
   :images="images"
-/>
+  @change="onChange"
+>
+  <template v-slot:index>Page: { index }</template>
+</van-image-preview>
 ```
 
 ```js
 export default {
   data() {
     return {
       show: false,
+      index: 0,
       images: [
         'https://img.yzcdn.cn/1.jpg',
         'https://img.yzcdn.cn/2.jpg'
       ]
     };
+  },
+
+  methods: {
+    onChange(index) {
+      this.index = index;
+    }
   }
 }
 ```
@@ -111,6 +121,12 @@ export default {
 | close | Triggered when close | { index, url } |
 | change | Triggered when current image change | index: index of current image |
 
+### Slot
+
+| name | Description |
+|------|------|
+| index | Custom index |
+
 ### onClose Parematers
 
 | Attribute | Description | Type |

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

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`index slot 1`] = `
+<div class="van-image-preview" name="van-fade">
+  <div class="van-image-preview__index">Custom Index</div>
+  <div class="van-swipe">
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+  </div>
+</div>
+`;
+
 exports[`render image 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-image-preview__index">1/3</div>

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

@@ -1,12 +1,7 @@
 import Vue from 'vue';
 import ImagePreview from '..';
 import ImagePreviewVue from '../ImagePreview';
-import {
-  mount,
-  trigger,
-  triggerDrag,
-  transitionStub
-} from '../../../test/utils';
+import { mount, trigger, triggerDrag, transitionStub } from '../../../test/utils';
 
 transitionStub();
 
@@ -109,3 +104,15 @@ test('zoom', async () => {
   expect(wrapper).toMatchSnapshot();
   Element.prototype.getBoundingClientRect = getBoundingClientRect;
 });
+
+test('index slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-image-preview :value="true">
+        <template v-slot:index>Custom Index</template>
+      </van-image-preview>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/image-preview/zh-CN.md

@@ -66,19 +66,29 @@ setTimeout(() => {
 <van-image-preview
   v-model="show"
   :images="images"
-/>
+  @change="onChange"
+>
+  <template v-slot:index>第{ index }页</template>
+</van-image-preview>
 ```
 
 ```js
 export default {
   data() {
     return {
       show: false,
+      index: 0,
       images: [
         'https://img.yzcdn.cn/1.jpg',
         'https://img.yzcdn.cn/2.jpg'
       ]
     };
+  },
+
+  methods: {
+    onChange(index) {
+      this.index = index;
+    }
   }
 }
 ```
@@ -127,6 +137,15 @@ export default {
 | close | 关闭时触发 | { index: 索引, url: 图片链接 } |
 | change | 切换当前图片时触发 | index, 当前图片的索引 |
 
+### Slot
+
+通过组件调用 `ImagePreview` 时，支持以下插槽：
+
+| 名称 | 说明 |
+|------|------|
+| index | 自定义页码内容 |
+
+
 ### onClose 回调参数
 
 | 参数名 | 说明 | 类型 |