From 456fc990172ce94e1fe9771c23b0fa086ee03ebf Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 11 Apr 2020 10:57:44 +0800 Subject: [PATCH] feat(ImagePreview): support local registration (#6031) --- src/dialog/README.zh-CN.md | 2 +- src/image-preview/ImagePreview.js | 2 +- src/image-preview/README.md | 10 ++++-- src/image-preview/README.zh-CN.md | 51 ++++++++++++++++++++++++---- src/image-preview/index.js | 2 ++ src/image-preview/test/index.spec.js | 4 +++ types/image-preview.d.ts | 2 ++ 7 files changed, 62 insertions(+), 11 deletions(-) diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index d5c177c04..58abf7441 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -8,7 +8,7 @@ ### 函数调用 -Dialog 是一个函数而不是组件，因此可以直接调用，展示对应的提示弹窗 +Dialog 是一个函数，调用后展示提示弹窗 ```js import { Dialog } from 'vant'; diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js index c8217209c..51ff430d9 100644 --- a/src/image-preview/ImagePreview.js +++ b/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'); diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 765e06aa5..e34a1e8be 100644 --- a/src/image-preview/README.md +++ b/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', + ], }; }, diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index cdc3d1276..2a63878ba 100644 --- a/src/image-preview/README.zh-CN.md +++ b/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', + ], }; }, diff --git a/src/image-preview/index.js b/src/image-preview/index.js index ff1055030..83fe8edd8 100644 --- a/src/image-preview/index.js +++ b/src/image-preview/index.js @@ -73,6 +73,8 @@ const ImagePreview = (images, startPosition = 0) => { return instance; }; +ImagePreview.Component = VueImagePreview; + ImagePreview.install = () => { Vue.use(VueImagePreview); }; diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js index 33b5874dc..eb6a1f5e6 100644 --- a/src/image-preview/test/index.spec.js +++ b/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); +}); diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts index 1627a8b8f..0e7ff210e 100644 --- a/types/image-preview.d.ts +++ b/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;