[new feature] ImagePreview: support component call (#3154)

packages/image-preview/demo/index.vue

@@ -11,6 +11,14 @@
     <demo-block :title="$t('button3')">
       <van-button @click="showImagePreview(0, 1000)">{{ $t('button3') }}</van-button>
     </demo-block>
+
+    <demo-block :title="$t('componentCall')">
+      <van-button @click="componentCall">{{ $t('componentCall') }}</van-button>
+      <van-image-preview
+        v-model="show"
+        :images="images"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -29,16 +37,29 @@ export default {
     'zh-CN': {
       button1: '预览图片',
       button2: '指定初始位置',
-      button3: '异步关闭'
+      button3: '异步关闭',
+      componentCall: '组件调用'
     },
     'en-US': {
       button1: 'Show Images',
       button2: 'Custom Start Position',
-      button3: 'Async Close'
+      button3: 'Async Close',
+      componentCall: 'Component Call'
     }
   },
 
+  data() {
+    return {
+      show: false,
+      images
+    };
+  },
+
   methods: {
+    componentCall() {
+      this.show = true;
+    },
+
     showImagePreview(position, timer) {
       const instance = ImagePreview({
         images,

packages/image-preview/en-US.md

@@ -4,6 +4,8 @@
 
 ```js
 import { ImagePreview } from 'vant';
+
+Vue.use(ImagePreview);
 ```
 
 ### Usage
@@ -48,7 +50,30 @@ setTimeout(() => {
 }, 1000);
 ```
 
-### Arguments
+#### Component Call
+
+```html
+<van-image-preview
+  v-model="show"
+  :images="images"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      images: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    };
+  }
+}
+```
+
+### Options
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
@@ -64,6 +89,27 @@ setTimeout(() => {
 | maxZoom | Max zoom | `Number` | `3` |
 | minZoom | Min zoom | `Number` | `1/3` |
 
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| images | Images URL list | `Array` | `[]` |
+| start-position | Start position | `Number` | `0` |
+| show-index | Whether to show index | `Boolean` | `true` |
+| show-indicators | Whether to show indicators | `Boolean` | `false` |
+| loop | Whether to enable loop | `Boolean` | `true` |
+| async-close | Whether to enable async close | `Boolean` | `false` |
+| class-name | Custom className | `String | Array | Object` | - |
+| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` |
+| max-zoom | Max zoom | `Number` | `3` |
+| min-zoom | Min zoom | `Number` | `1/3` |
+
+### Event
+
+| Event | Description | Parameters |
+|------|------|------|
+| close | Triggered when close | { index, url } |
+
 ### onClose Parematers
 
 | Attribute | Description | Type |

packages/image-preview/zh-CN.md

@@ -6,6 +6,8 @@
 
 ```js
 import { ImagePreview } from 'vant';
+
+Vue.use(ImagePreview);
 ```
 
 ### 代码演示
@@ -56,7 +58,34 @@ setTimeout(() => {
 }, 1000);
 ```
 
-### 配置项
+#### 组件调用
+
+如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
+
+```html
+<van-image-preview
+  v-model="show"
+  :images="images"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      images: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    };
+  }
+}
+```
+
+### Options
+
+通过函数调用 `ImagePreview` 时，支持传入以下选项：
 
 | 参数名 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
@@ -72,6 +101,31 @@ setTimeout(() => {
 | maxZoom | 手势缩放时，最大缩放比例 | `Number` | `3` | 1.6.14 |
 | minZoom | 手势缩放时，最小缩放比例 | `Number` | `1/3` | 1.6.14 |
 
+### API
+
+通过组件调用 `ImagePreview` 时，支持以下 API：
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| images | 需要预览的图片 URL 数组 | `Array` | `[]` | 1.1.16 |
+| start-position | 图片预览起始位置索引 | `Number` | `0` | 1.1.16 |
+| show-index | 是否显示页码 | `Boolean` | `true` | 1.3.4 |
+| show-indicators | 是否显示轮播指示器 | `Boolean` | `false` | 1.3.10 |
+| loop | 是否开启循环播放 | `Boolean` | `true` | 1.4.4 |
+| async-close | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 |
+| class-name | 自定义类名 | `String | Array | Object` | - | 1.5.2 |
+| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.3 |
+| max-zoom | 手势缩放时，最大缩放比例 | `Number` | `3` | 1.6.14 |
+| min-zoom | 手势缩放时，最小缩放比例 | `Number` | `1/3` | 1.6.14 |
+
+### Event
+
+通过组件调用 `ImagePreview` 时，支持以下事件：
+
+| 事件 | 说明 | 回调参数 |
+|------|------|------|
+| close | 关闭时触发 | { index: 索引, url: 图片链接 } |
+
 ### onClose 回调参数
 
 | 参数名 | 说明 | 类型 |