diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md index 43d11f7847..673bb78db8 100644 --- a/docs/en-US/component/image.md +++ b/docs/en-US/component/image.md @@ -100,28 +100,30 @@ image/manually-preview ### Image Slots -| Name | Description | -| ----------- | -------------------------------------------------------- | -| placeholder | custom placeholder content when image hasn't loaded yet. | -| error | custom image load failed content. | -| viewer | custom content when image preview. | +| Name | Description | Type | +| ----------------- | -------------------------------------------------------- | ------------------------------------------------- | +| placeholder | custom placeholder content when image hasn't loaded yet. | - | +| error | custom image load failed content. | - | +| viewer | custom content when image preview. | - | +| progress ^(2.9.4) | custom progress content when image preview. | ^[object]`{ activeIndex: number, total: number }` | ## Image Viewer API ### Image Viewer Attributes -| Name | Description | Type | Default | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------- | -| url-list | preview link list. | ^[object]`string[]` | [] | -| z-index | preview backdrop z-index. | ^[number] / ^[string] | — | -| initial-index | the initial preview image index, less than or equal to the length of `url-list`. | ^[number] | 0 | -| infinite | whether preview is infinite. | ^[boolean] | true | -| hide-on-click-modal | whether user can emit close event when clicking backdrop. | ^[boolean] | false | -| teleported | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`. | ^[boolean] | false | -| zoom-rate ^(2.2.27) | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 | -| min-scale ^(2.4.0) | the min scale of the image viewer zoom event. | ^[number] | 0.2 | -| max-scale ^(2.4.0) | the max scale of the image viewer zoom event. | ^[number] | 7 | -| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | ^[boolean] | true | +| Name | Description | Type | Default | +| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------- | +| url-list | preview link list. | ^[object]`string[]` | [] | +| z-index | preview backdrop z-index. | ^[number] / ^[string] | — | +| initial-index | the initial preview image index, less than or equal to the length of `url-list`. | ^[number] | 0 | +| infinite | whether preview is infinite. | ^[boolean] | true | +| hide-on-click-modal | whether user can emit close event when clicking backdrop. | ^[boolean] | false | +| teleported | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`. | ^[boolean] | false | +| zoom-rate ^(2.2.27) | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 | +| min-scale ^(2.4.0) | the min scale of the image viewer zoom event. | ^[number] | 0.2 | +| max-scale ^(2.4.0) | the max scale of the image viewer zoom event. | ^[number] | 7 | +| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | ^[boolean] | true | +| show-progress ^(2.9.4) | whether to display the preview image progress content | ^[boolean] | false | ### Image Viewer Events diff --git a/docs/examples/image/image-preview.vue b/docs/examples/image/image-preview.vue index 32b73dd266..41574cd878 100644 --- a/docs/examples/image/image-preview.vue +++ b/docs/examples/image/image-preview.vue @@ -7,6 +7,7 @@ :max-scale="7" :min-scale="0.2" :preview-src-list="srcList" + show-progress :initial-index="4" fit="cover" /> diff --git a/packages/components/image-viewer/__tests__/image-viewer.test.tsx b/packages/components/image-viewer/__tests__/image-viewer.test.tsx index 22c1fdb8da..b55ef112df 100644 --- a/packages/components/image-viewer/__tests__/image-viewer.test.tsx +++ b/packages/components/image-viewer/__tests__/image-viewer.test.tsx @@ -58,4 +58,23 @@ describe('', () => { expect(imgList[1].attributes('style')).not.contains('display: none;') wrapper.unmount() }) + + test('image progress render', async () => { + const wrapper = mount( + + ) + + await doubleWait() + const viewer = wrapper.find('.el-image-viewer__wrapper') + expect(viewer.exists()).toBe(true) + await wrapper.find('.el-image-viewer__next').trigger('click') + await doubleWait() + const innerText = wrapper.find('.el-image-viewer__progress').text() + expect(innerText).toBe('1 / 2') + wrapper.unmount() + }) }) diff --git a/packages/components/image-viewer/src/image-viewer.ts b/packages/components/image-viewer/src/image-viewer.ts index a7cbdaccc4..0b647962b3 100644 --- a/packages/components/image-viewer/src/image-viewer.ts +++ b/packages/components/image-viewer/src/image-viewer.ts @@ -78,6 +78,13 @@ export const imageViewerProps = buildProps({ type: Number, default: 7, }, + /** + * @description show preview image progress content. + */ + showProgress: { + type: Boolean, + default: false, + }, /** * @description set HTML attribute: crossorigin. */ diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue index fa32c393b2..08c5b1c356 100644 --- a/packages/components/image-viewer/src/image-viewer.vue +++ b/packages/components/image-viewer/src/image-viewer.vue @@ -37,6 +37,15 @@ +
+ + {{ progress }} + +
@@ -160,17 +169,11 @@ const isSingle = computed(() => { return urlList.length <= 1 }) -const isFirst = computed(() => { - return activeIndex.value === 0 -}) +const isFirst = computed(() => activeIndex.value === 0) -const isLast = computed(() => { - return activeIndex.value === props.urlList.length - 1 -}) +const isLast = computed(() => activeIndex.value === props.urlList.length - 1) -const currentImg = computed(() => { - return props.urlList[activeIndex.value] -}) +const currentImg = computed(() => props.urlList[activeIndex.value]) const arrowPrevKls = computed(() => [ ns.e('btn'), @@ -205,6 +208,10 @@ const imgStyle = computed(() => { return style }) +const progress = computed( + () => `${activeIndex.value + 1} / ${props.urlList.length}` +) + function hide() { unregisterEventListener() emit('close') diff --git a/packages/components/image/src/image.ts b/packages/components/image/src/image.ts index 3284c92baa..1794526f28 100644 --- a/packages/components/image/src/image.ts +++ b/packages/components/image/src/image.ts @@ -104,6 +104,13 @@ export const imageProps = buildProps({ type: Number, default: 7, }, + /** + * @description show preview image progress content. + */ + showProgress: { + type: Boolean, + default: false, + }, /** * @description set HTML attribute: crossorigin. */ diff --git a/packages/components/image/src/image.vue b/packages/components/image/src/image.vue index 5ec74ff104..5b8e9ff969 100644 --- a/packages/components/image/src/image.vue +++ b/packages/components/image/src/image.vue @@ -31,6 +31,7 @@ :zoom-rate="zoomRate" :min-scale="minScale" :max-scale="maxScale" + :show-progress="showProgress" :url-list="previewSrcList" :crossorigin="crossorigin" :hide-on-click-modal="hideOnClickModal" @@ -42,6 +43,9 @@
+
diff --git a/packages/theme-chalk/src/image-viewer.scss b/packages/theme-chalk/src/image-viewer.scss index a01c94ef37..82cb5b2696 100644 --- a/packages/theme-chalk/src/image-viewer.scss +++ b/packages/theme-chalk/src/image-viewer.scss @@ -82,6 +82,14 @@ } } + @include e(progress) { + left: 50%; + transform: translateX(-50%); + cursor: default; + color: #fff; + bottom: 90px; + } + @include e(prev) { top: 50%; transform: translateY(-50%);