diff --git a/.prettierrc b/.prettierrc index 59d033053d2..7584c6ee6c9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,6 +2,7 @@ "semi": false, "singleQuote": true, "printWidth": 80, + "removeUnused": false, "trailingComma": "none", "proseWrap": "never" } diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index ba3d5ba01e6..077928eac2b 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -18,6 +18,7 @@ - `n-modal` adds `draggable` prop, closes [#6525](https://github.com/tusen-ai/naive-ui/issues/6525), [#5792](https://github.com/tusen-ai/naive-ui/issues/5792), [#5711](https://github.com/tusen-ai/naive-ui/issues/5711), [#5501](https://github.com/tusen-ai/naive-ui/issues/5501) and [#2152](https://github.com/tusen-ai/naive-ui/issues/2152). - `useDialog` supports `draggable` option. - `useModal` supports `draggable` option. +- `n-image`支持通过`enable-wheel`属性配置是否启用鼠标滚轮缩放，默认为`true` ### Fixes diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index aee800ad1d2..571f333a78e 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -18,6 +18,7 @@ - `n-modal` 新增 `draggable` 属性，关闭 [#6525](https://github.com/tusen-ai/naive-ui/issues/6525)、[#5792](https://github.com/tusen-ai/naive-ui/issues/5792)、[#5711](https://github.com/tusen-ai/naive-ui/issues/5711)、[#5501](https://github.com/tusen-ai/naive-ui/issues/5501)、[#2152](https://github.com/tusen-ai/naive-ui/issues/2152) - `useDialog` 支持 `draggable` 参数 - `useModal` 支持 `draggable` 参数 +- `n-image`支持通过`enable-wheel`属性配置是否启用鼠标滚轮缩放，默认为`true` ### Fixes diff --git a/src/image/demos/zhCN/index.demo-entry.md b/src/image/demos/zhCN/index.demo-entry.md index 12ae29df0c8..1be5bd97a19 100644 --- a/src/image/demos/zhCN/index.demo-entry.md +++ b/src/image/demos/zhCN/index.demo-entry.md @@ -16,6 +16,7 @@ tooltip.vue full-debug.vue lazy.vue previewed-img-props.vue +wheel-zoom.vue ``` ## API @@ -25,6 +26,7 @@ previewed-img-props.vue | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | alt | `string` | `undefined` | 图片说明 | | +| enable-wheel | `boolean` | `true` | 是否启用鼠标滚轮缩放图片 | 2.41.0 | | fallback-src | `string` | `undefined` | 图片加载失败时显示的地址 | | | height | `string \| number` | `undefined` | 图片高度 | | | img-props | `ImgHTMLAttributes` | `undefined` | 组件中 img 元素的属性 | | @@ -46,6 +48,7 @@ previewed-img-props.vue | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | +| enable-wheel | `boolean` | `true` | 是否启用鼠标滚轮缩放图片 | 2.41.0 | | render-toolbar | `(props: { nodes: { prev: VNode, next: VNode, rotateCounterclockwise: VNode, rotateClockwise: VNode, resizeToOriginalSize: VNode, zoomOut: VNode, zoomIn: VNode, download: VNode, close: VNode } }) => VNodeChild` | `undefined` | 工具栏的渲染函数 | `2.38.2` | | show-toolbar | `boolean` | `true` | 图片放大后是否展示底部工具栏 | | | show-toolbar-tooltip | `boolean` | `false` | 是否展示工具栏的提示 | 2.24.0 | diff --git a/src/image/demos/zhCN/wheel-zoom.demo.vue b/src/image/demos/zhCN/wheel-zoom.demo.vue new file mode 100644 index 00000000000..8890d277912 --- /dev/null +++ b/src/image/demos/zhCN/wheel-zoom.demo.vue @@ -0,0 +1,31 @@ + +# 鼠标滚轮缩放 + +使用鼠标滚轮可以放大图片，向下滚动只能缩小到原图大小，不能更小。可以通过`enable-wheel`属性来控制是否启用此功能。 + + + + + diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx index 0cdd62c325d..82c342676a6 100644 --- a/src/image/src/Image.tsx +++ b/src/image/src/Image.tsx @@ -223,6 +223,7 @@ export default defineComponent({ showToolbar={this.showToolbar} showToolbarTooltip={this.showToolbarTooltip} renderToolbar={this.renderToolbar} + enableWheel={this.enableWheel} > {{ default: () => imgNode diff --git a/src/image/src/ImagePreview.tsx b/src/image/src/ImagePreview.tsx index ad0dbfb6133..7809eed8e1f 100644 --- a/src/image/src/ImagePreview.tsx +++ b/src/image/src/ImagePreview.tsx @@ -351,6 +351,24 @@ export default defineComponent({ } } + function zoomToOriginalSize(): void { + const originalScale = getOrignalImageSizeScale() + if (scale > originalScale) { + const originalScaleValue = scale + scaleExp = Math.floor(Math.log(originalScale) / Math.log(scaleRadix)) + scale = Math.max(originalScale, scaleRadix ** scaleExp) + const diff = originalScaleValue - scale + derivePreviewStyle(false) + const offset = getDerivedOffset() + scale += diff + derivePreviewStyle(false) + scale -= diff + offsetX = offset.offsetX + offsetY = offset.offsetY + derivePreviewStyle() + } + } + function handleDownloadClick(): void { const src = previewSrcRef.value if (src) { @@ -474,6 +492,14 @@ export default defineComponent({ previewedImgProps: imageContext?.previewedImgPropsRef, handleWheel(e: WheelEvent) { e.preventDefault() + if (props.enableWheel && showRef.value) { + if (e.deltaY < 0) { + zoomIn() + } + else { + zoomToOriginalSize() + } + } }, handlePreviewMousedown, handlePreviewDblclick, @@ -489,6 +515,7 @@ export default defineComponent({ }, zoomIn, zoomOut, + zoomToOriginalSize, handleDownloadClick, rotateCounterclockwise, rotateClockwise, diff --git a/src/image/src/interface.ts b/src/image/src/interface.ts index 250845ae6d1..9d7804fc4a9 100644 --- a/src/image/src/interface.ts +++ b/src/image/src/interface.ts @@ -18,7 +18,8 @@ export const imagePreviewSharedProps = { onPreviewNext: Function as PropType<() => void>, showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean, - renderToolbar: Function as PropType + renderToolbar: Function as PropType, + enableWheel: { type: Boolean, default: true } } export interface ImageContext { diff --git a/src/image/src/public-types.ts b/src/image/src/public-types.ts index 9b0d9fee9ff..ace45e0c076 100644 --- a/src/image/src/public-types.ts +++ b/src/image/src/public-types.ts @@ -17,3 +17,11 @@ export interface ImageRenderToolbarProps { export type ImageRenderToolbar = (props: ImageRenderToolbarProps) => VNodeChild export type ImageGroupRenderToolbarProps = ImageRenderToolbarProps export type ImageGroupRenderToolbar = ImageRenderToolbar + +export interface ImagePreviewProps { + /** + * 是否启用鼠标滚轮缩放图片 + * @default true + */ + enableWheel?: boolean +}