diff --git a/src/configs/hotkey.ts b/src/configs/hotkey.ts
index 7ae91902..cd32fb5c 100644
--- a/src/configs/hotkey.ts
+++ b/src/configs/hotkey.ts
@@ -55,8 +55,8 @@ export const HOTKEY_DOC = [
{ label: '放大画布', value: 'Ctrl + =' },
{ label: '缩小画布', value: 'Ctrl + -' },
{ label: '缩放画布到合适大小', value: 'Ctrl + 0' },
- { label: '编辑上一页', value: '↑ / ←' },
- { label: '编辑下一页', value: '↓ / →' },
+ { label: '编辑上一页', value: '↑ / ← / 鼠标上滚' },
+ { label: '编辑下一页', value: '↓ / → / 鼠标下滚' },
],
},
{
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index b1d5ed5a..57b5c0f9 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -2,7 +2,7 @@
mousewheelScaleCanvas($event)"
+ @mousewheel="$event => handleMousewheelCanvas($event)"
@mousedown="$event => handleClickBlankArea($event)"
v-contextmenu="contextmenus"
v-click-outside="removeEditorAreaFocus"
@@ -82,6 +82,7 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
import { PPTElement, Slide } from '@/types/slides'
import { AlignmentLineProps } from '@/types/edit'
import { removeAllRanges } from '@/utils/selection'
+import { KEYS } from '@/configs/hotkey'
import useViewportSize from './hooks/useViewportSize'
import useMouseSelection from './hooks/useMouseSelection'
@@ -98,6 +99,7 @@ import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
import useSelectAllElement from '@/hooks/useSelectAllElement'
import useScaleCanvas from '@/hooks/useScaleCanvas'
import useScreening from '@/hooks/useScreening'
+import useSlideHandler from '@/hooks/useSlideHandler'
import EditableElement from './EditableElement.vue'
import MouseSelection from './MouseSelection.vue'
@@ -158,6 +160,7 @@ export default defineComponent({
const { deleteAllElements } = useDeleteElement()
const { pasteElement } = useCopyAndPasteElement()
const { enterScreening } = useScreening()
+ const { updateSlideIndex } = useSlideHandler()
// 点击画布的空白区域:清空焦点元素、设置画布焦点、清除文字选区
const handleClickBlankArea = (e: MouseEvent) => {
@@ -172,16 +175,24 @@ export default defineComponent({
if (editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, false)
}
- // 按住Ctrl键滚动鼠标缩放画布
+ // 滚动鼠标
const { scaleCanvas } = useScaleCanvas()
const throttleScaleCanvas = throttle(scaleCanvas, 100, { leading: true, trailing: false })
+ const throttleUpdateSlideIndex = throttle(updateSlideIndex, 300, { leading: true, trailing: false })
- const mousewheelScaleCanvas = (e: WheelEvent) => {
- if (!ctrlKeyState.value) return
-
+ const handleMousewheelCanvas = (e: WheelEvent) => {
e.preventDefault()
- if (e.deltaY > 0) throttleScaleCanvas('-')
- else if (e.deltaY < 0) throttleScaleCanvas('+')
+
+ // 按住Ctrl键时:缩放画布
+ if (ctrlKeyState.value) {
+ if (e.deltaY > 0) throttleScaleCanvas('-')
+ else if (e.deltaY < 0) throttleScaleCanvas('+')
+ }
+ // 上下翻页
+ else {
+ if (e.deltaY > 0) throttleUpdateSlideIndex(KEYS.DOWN)
+ else if (e.deltaY < 0) throttleUpdateSlideIndex(KEYS.UP)
+ }
}
// 开关网格线
@@ -247,7 +258,7 @@ export default defineComponent({
scaleElement,
dragLineElement,
scaleMultiElement,
- mousewheelScaleCanvas,
+ handleMousewheelCanvas,
contextmenus,
}
},