From 1f77796bad6307dad8343cecc00bd75a8b82d4cf Mon Sep 17 00:00:00 2001 From: uniquker Date: Sat, 15 Oct 2022 20:51:49 +0800 Subject: [PATCH] feat(ImagePreview): add preview image slot (#11133) --- .../vant/src/image-preview/ImagePreview.tsx | 3 ++ .../src/image-preview/ImagePreviewItem.tsx | 24 +++++++----- packages/vant/src/image-preview/README.md | 37 +++++++++++++++++++ .../vant/src/image-preview/README.zh-CN.md | 37 +++++++++++++++++++ .../vant/src/image-preview/demo/index.vue | 37 +++++++++++++++++++ packages/vant/src/image-preview/index.less | 6 ++- .../vant/src/image-preview/test/index.spec.ts | 33 +++++++++++++++++ 7 files changed, 166 insertions(+), 11 deletions(-) diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx index d0e378e4f..db46c8824 100644 --- a/packages/vant/src/image-preview/ImagePreview.tsx +++ b/packages/vant/src/image-preview/ImagePreview.tsx @@ -157,6 +157,9 @@ export default defineComponent({ rootHeight={state.rootHeight} onScale={emitScale} onClose={emitClose} + v-slots={{ + image: slots.image, + }} /> ))} diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx index 381ea215b..f02210743 100644 --- a/packages/vant/src/image-preview/ImagePreviewItem.tsx +++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx @@ -47,7 +47,7 @@ export default defineComponent({ emits: ['scale', 'close'], - setup(props, { emit }) { + setup(props, { emit, slots }) { const state = reactive({ scale: 1, moveX: 0, @@ -293,14 +293,20 @@ export default defineComponent({ onTouchend={onTouchEnd} onTouchcancel={onTouchEnd} > - + {slots.image ? ( +
+ {slots.image({ src: props.src })} +
+ ) : ( + + )} ); }; diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index 110c5e97d..8ed9051e1 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -138,6 +138,42 @@ export default { }; ``` +### Component Call use image slot + +```html + + + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const show = ref(false); + const index = ref(0); + const images = [ + 'https://www.w3school.com.cn/i/movie.ogg', + 'https://www.w3school.com.cn/i/movie.ogg', + 'https://www.w3school.com.cn/i/movie.ogg', + ]; + const onChange = (newIndex) => { + index.value = newIndex; + }; + + return { + show, + index, + images, + onChange, + }; + }, +}; +``` + ## API ### Methods @@ -246,6 +282,7 @@ imagePreviewRef.value?.swipeTo(1); | --- | --- | --- | | index | Custom index | { index: index of current image } | | cover | Custom content that covers the image preview | - | +| image | Custom image slot | { src: current image src } | ### onClose Parameters diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md index 4bd86280c..dc823790e 100644 --- a/packages/vant/src/image-preview/README.zh-CN.md +++ b/packages/vant/src/image-preview/README.zh-CN.md @@ -149,6 +149,42 @@ export default { }; ``` +### 组件调用 - 使用 image 插槽 + +```html + + + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const show = ref(false); + const index = ref(0); + const images = [ + 'https://www.w3school.com.cn/i/movie.ogg', + 'https://www.w3school.com.cn/i/movie.ogg', + 'https://www.w3school.com.cn/i/movie.ogg', + ]; + const onChange = (newIndex) => { + index.value = newIndex; + }; + + return { + show, + index, + images, + onChange, + }; + }, +}; +``` + ## API ### 方法 @@ -264,6 +300,7 @@ imagePreviewRef.value?.swipeTo(1); | ----- | ------------------------------ | ------------------------- | | index | 自定义页码内容 | { index: 当前图片的索引 } | | cover | 自定义覆盖在图片预览上方的内容 | - | +| image | 自定义图片插槽 | { src: 当前资源地址 } | ### onClose 回调参数 diff --git a/packages/vant/src/image-preview/demo/index.vue b/packages/vant/src/image-preview/demo/index.vue index e5780d686..e57c27974 100644 --- a/packages/vant/src/image-preview/demo/index.vue +++ b/packages/vant/src/image-preview/demo/index.vue @@ -19,6 +19,7 @@ const t = useTranslate({ customConfig: '传入配置项', startPosition: '指定初始位置', useComponent: '使用 ImagePreview 组件', + componentImage: '组件调用使用image插槽', index: (index: number) => `第${index + 1}页`, }, 'en-US': { @@ -30,6 +31,7 @@ const t = useTranslate({ customConfig: 'Custom Config', startPosition: 'Set Start Position', useComponent: 'Use ImagePreview Component', + componentImage: 'Component Call use image slot', index: (index: number) => `Page: ${index}`, }, }); @@ -41,9 +43,19 @@ const images = [ cdnURL('apple-4.jpeg'), ]; +const imagesSlot = [ + 'https://www.w3school.com.cn/i/movie.ogg', + 'https://www.w3school.com.cn/i/movie.ogg', + 'https://www.w3school.com.cn/i/movie.ogg', + 'https://www.w3school.com.cn/i/movie.ogg', +]; + const show = ref(false); const index = ref(0); +const showSlot = ref(false); +const indexSlot = ref(0); + const onClose = () => showToast(t('closed')); const beforeClose = () => @@ -61,6 +73,14 @@ const showComponentCall = () => { show.value = true; }; +const showComponentCallSlot = () => { + showSlot.value = true; +}; + +const onChangeSlot = (newIndex: number) => { + indexSlot.value = newIndex; +}; + const showFunctionCall = (options: Partial = {}) => { const instance = showImagePreview({ images, @@ -112,4 +132,21 @@ const showFunctionCall = (options: Partial = {}) => { + + + + + + + diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less index 48d10375c..b4e16de83 100644 --- a/packages/vant/src/image-preview/index.less +++ b/packages/vant/src/image-preview/index.less @@ -37,7 +37,8 @@ left: 0; } - &__image { + &__image, + &__image-wrap { width: 100%; transition-property: transform; @@ -46,7 +47,8 @@ height: 100%; } - img { + img, + video { // disable desktop browser image drag -webkit-user-drag: none; } diff --git a/packages/vant/src/image-preview/test/index.spec.ts b/packages/vant/src/image-preview/test/index.spec.ts index dd8467685..da6151a14 100644 --- a/packages/vant/src/image-preview/test/index.spec.ts +++ b/packages/vant/src/image-preview/test/index.spec.ts @@ -254,3 +254,36 @@ test('zoom out', async () => { restore(); }); + +test('should render image slot correctly', async () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + images, + }, + slots: { + image: ({ src }) => ``, + }, + }); + + await later(); + + expect(wrapper.html().includes('test-img')).toBeTruthy(); +}); + +test('should render image slot correctly 2', async () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + images, + }, + slots: { + image: ({ src }) => + ``, + }, + }); + + await later(); + + expect(wrapper.html().includes('video')).toBeTruthy(); +});