From 61d5dcc3aed7da345b362ce24a82340c699cf64a Mon Sep 17 00:00:00 2001 From: jiaxiang Date: Fri, 17 Jan 2025 15:50:44 +0800 Subject: [PATCH] feat(components): [image-viewer] add toolbar slot (#19497) * feat(components): [image-viewer] add toolbar slot * feat(docs): add docs * docs: update * docs: update * docs: update image viewer API types for clarity * docs: update custom toolbar version in image documentation to 2.9.4 * Update docs/examples/image/custom-toolbar.vue Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> * style: remove dividers * revert: style * docs: format --------- Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> --- docs/en-US/component/image.md | 39 ++++++++-- docs/examples/image/custom-toolbar.vue | 76 +++++++++++++++++++ .../image-viewer/src/image-viewer.vue | 43 ++++++----- packages/components/image/src/image.vue | 7 +- packages/theme-chalk/src/image-viewer.scss | 8 +- 5 files changed, 145 insertions(+), 28 deletions(-) create mode 100644 docs/examples/image/custom-toolbar.vue diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md index 673bb78db8..aa9f287384 100644 --- a/docs/en-US/component/image.md +++ b/docs/en-US/component/image.md @@ -63,6 +63,14 @@ image/manually-preview ::: +## Custom Toolbar ^(2.9.4) + +:::demo Custom toolbar content by `slot = toolbar` + +image/custom-toolbar + +::: + ## Image API ### Image Attributes @@ -100,12 +108,13 @@ image/manually-preview ### Image Slots -| 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 }` | +| 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 }` | +| toolbar ^(2.9.4) | custom toolbar content when image preview. | ^[object]`{actions: (action: ImageViewerAction, options?: ImageViewerActionOptions ) => void, prev: ()=> void, next: () => void,reset: () => void, activeIndex: number }` | ## Image Viewer API @@ -123,7 +132,7 @@ image/manually-preview | 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 | +| show-progress ^(2.9.4) | whether to display the preview image progress content | ^[boolean] | false | ### Image Viewer Events @@ -139,3 +148,19 @@ image/manually-preview | -------------------- | ------------------------------- | ------------------------------------ | | setActiveItem | manually switch image | ^[Function]`(index: number) => void` | | showPreview ^(2.9.4) | manually open preview big image | ^[Function]`() => void` | + +## Type Declarations + +
+ Show declarations + +```ts +type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise' +type ImageViewerActionOptions = { + enableTransition?: boolean + zoomRate?: number + rotateDeg?: number +} +``` + +
diff --git a/docs/examples/image/custom-toolbar.vue b/docs/examples/image/custom-toolbar.vue new file mode 100644 index 0000000000..d98dcd6486 --- /dev/null +++ b/docs/examples/image/custom-toolbar.vue @@ -0,0 +1,76 @@ + + + diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue index 08c5b1c356..b0f17eb85d 100644 --- a/packages/components/image-viewer/src/image-viewer.vue +++ b/packages/components/image-viewer/src/image-viewer.vue @@ -49,23 +49,32 @@
- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
diff --git a/packages/components/image/src/image.vue b/packages/components/image/src/image.vue index 5b8e9ff969..6f210203fe 100644 --- a/packages/components/image/src/image.vue +++ b/packages/components/image/src/image.vue @@ -43,8 +43,11 @@
- diff --git a/packages/theme-chalk/src/image-viewer.scss b/packages/theme-chalk/src/image-viewer.scss index 82cb5b2696..f2486902c5 100644 --- a/packages/theme-chalk/src/image-viewer.scss +++ b/packages/theme-chalk/src/image-viewer.scss @@ -36,7 +36,6 @@ user-select: none; .#{$namespace}-icon { - font-size: inherit; cursor: pointer; } } @@ -63,7 +62,6 @@ left: 50%; bottom: 30px; transform: translateX(-50%); - width: 282px; height: 44px; padding: 0 23px; background-color: getCssVar('text-color', 'regular'); @@ -79,6 +77,12 @@ display: flex; align-items: center; justify-content: space-around; + gap: 22px; + padding: 0 6px; + + @include e(actions__divider) { + margin: 0 -6px; + } } }