feat(ImagePreview): support local registration (#6031)

src/dialog/README.zh-CN.md

@@ -8,7 +8,7 @@
 
 ### 函数调用
 
-Dialog 是一个函数而不是组件，因此可以直接调用，展示对应的提示弹窗
+Dialog 是一个函数，调用后展示提示弹窗
 
 ```js
 import { Dialog } from 'vant';

src/image-preview/ImagePreview.js

@@ -8,11 +8,11 @@ import { PopupMixin } from '../mixins/popup';
 import { TouchMixin } from '../mixins/touch';
 
 // Components
+import Icon from '../icon';
 import Image from '../image';
 import Swipe from '../swipe';
 import Loading from '../loading';
 import SwipeItem from '../swipe-item';
-import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('image-preview');
 

src/image-preview/README.md

@@ -41,7 +41,10 @@ After setting the `closeable` attribute, the close icon will be displayed in the
 
 ```js
 ImagePreview({
-  images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
+  images: [
+    'https://img.yzcdn.cn/vant/apple-1.jpg',
+    'https://img.yzcdn.cn/vant/apple-2.jpg',
+  ],
   closeable: true,
 });
 ```
@@ -76,7 +79,10 @@ export default {
     return {
       show: false,
       index: 0,
-      images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
+      images: [
+        'https://img.yzcdn.cn/vant/apple-1.jpg',
+        'https://img.yzcdn.cn/vant/apple-2.jpg',
+      ],
     };
   },
 

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

@@ -1,14 +1,36 @@
 # ImagePreview 图片预览
 
-### 引入
+### 介绍
 
-`ImagePreview`和其他组件不同，不是通过 HTML 结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
+图片放大预览，支持函数调用和组件调用两种方式
+
+### 函数调用
+
+ImagePreview 是一个函数，调用函数后展示图片预览
+
+```js
+import { Dialog } from 'vant';
+
+ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
+```
+
+### 组件调用
+
+通过组件调用 ImagePreview 时，可以通过下面的方式进行注册
 
 ```js
 import Vue from 'vue';
 import { ImagePreview } from 'vant';
 
+// 全局注册
 Vue.use(ImagePreview);
+
+// 局部注册
+export default {
+  components: {
+    [ImagePreview.Component.name]: ImagePreview.Component,
+  },
+};
 ```
 
 ## 代码演示
@@ -18,7 +40,10 @@ Vue.use(ImagePreview);
 直接传入图片数组，即可展示图片预览
 
 ```js
-ImagePreview(['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg']);
+ImagePreview([
+  'https://img.yzcdn.cn/vant/apple-1.jpg',
+  'https://img.yzcdn.cn/vant/apple-2.jpg',
+]);
 ```
 
 ### 传入配置项
@@ -27,7 +52,10 @@ ImagePreview(['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg']);
 
 ```js
 ImagePreview({
-  images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
+  images: [
+    'https://img.yzcdn.cn/vant/apple-1.jpg',
+    'https://img.yzcdn.cn/vant/apple-2.jpg',
+  ],
   startPosition: 1,
   onClose() {
     // do something
@@ -41,7 +69,10 @@ ImagePreview({
 
 ```js
 ImagePreview({
-  images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
+  images: [
+    'https://img.yzcdn.cn/vant/apple-1.jpg',
+    'https://img.yzcdn.cn/vant/apple-2.jpg',
+  ],
   closeable: true,
 });
 ```
@@ -52,7 +83,10 @@ ImagePreview({
 
 ```js
 const instance = ImagePreview({
-  images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
+  images: [
+    'https://img.yzcdn.cn/vant/apple-1.jpg',
+    'https://img.yzcdn.cn/vant/apple-2.jpg',
+  ],
   asyncClose: true,
 });
 
@@ -77,7 +111,10 @@ export default {
     return {
       show: false,
       index: 0,
-      images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
+      images: [
+        'https://img.yzcdn.cn/vant/apple-1.jpg',
+        'https://img.yzcdn.cn/vant/apple-2.jpg',
+      ],
     };
   },
 

src/image-preview/index.js

@@ -73,6 +73,8 @@ const ImagePreview = (images, startPosition = 0) => {
   return instance;
 };
 
+ImagePreview.Component = VueImagePreview;
+
 ImagePreview.install = () => {
   Vue.use(VueImagePreview);
 };

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

@@ -261,3 +261,7 @@ test('closeOnPopstate', () => {
   trigger(window, 'popstate');
   expect(wrapper.emitted('input')[1]).toBeFalsy();
 });
+
+test('ImagePreview.Component', () => {
+  expect(ImagePreview.Component).toEqual(ImagePreviewVue);
+});

types/image-preview.d.ts

@@ -1,3 +1,4 @@
+import { VanComponent } from './component';
 import { VanPopupMixin } from './mixins/popup';
 
 export type ImagePreviewOptions =
@@ -32,6 +33,7 @@ export class VanImagePreview extends VanPopupMixin {
 export interface ImagePreview {
   (options: ImagePreviewOptions, startPosition?: number): VanImagePreview;
   install(): void;
+  Component: typeof VanComponent;
 }
 
 export const ImagePreview: ImagePreview;