From 95494b7154289a51b57ad94cbbee60a1ea654f35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bean=20Deng=20=E9=82=93=E6=96=8C?= Date: Wed, 6 Sep 2023 14:28:14 +0800 Subject: [PATCH] feat(components): [image-viewer] Add rotate event when rotating images (#14138) * feat(components): [image-viewer] Add rotate event when rotating images * Update docs/en-US/component/image.md Co-authored-by: btea <2356281422@qq.com> --------- Co-authored-by: btea <2356281422@qq.com> --- docs/en-US/component/image.md | 1 + packages/components/image-viewer/src/image-viewer.ts | 1 + packages/components/image-viewer/src/image-viewer.vue | 2 ++ 3 files changed, 4 insertions(+) diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md index 84b78ffda3..566a721a7a 100644 --- a/docs/en-US/component/image.md +++ b/docs/en-US/component/image.md @@ -116,6 +116,7 @@ image/image-preview | ------ | ------------------------------------------------------------------------------------------------- | ------------------------------------ | | close | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | ^[Function]`() => void` | | switch | trigger when switching images. | ^[Function]`(index: number) => void` | +| rotate ^(2.3.13) | trigger when rotating images. | ^[Function]`(deg: number) => void` | ### Image Viewer Exposes diff --git a/packages/components/image-viewer/src/image-viewer.ts b/packages/components/image-viewer/src/image-viewer.ts index 9f42360666..251e8bf148 100644 --- a/packages/components/image-viewer/src/image-viewer.ts +++ b/packages/components/image-viewer/src/image-viewer.ts @@ -70,6 +70,7 @@ export type ImageViewerProps = ExtractPropTypes export const imageViewerEmits = { close: () => true, switch: (index: number) => isNumber(index), + rotate: (deg: number) => isNumber(deg), } export type ImageViewerEmits = typeof imageViewerEmits diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue index 8262b1a34f..c6a0f0df82 100644 --- a/packages/components/image-viewer/src/image-viewer.vue +++ b/packages/components/image-viewer/src/image-viewer.vue @@ -345,9 +345,11 @@ function handleActions(action: ImageViewerAction, options = {}) { break case 'clockwise': transform.value.deg += rotateDeg + emit('rotate', transform.value.deg) break case 'anticlockwise': transform.value.deg -= rotateDeg + emit('rotate', transform.value.deg) break } transform.value.enableTransition = enableTransition