给图片展示、地图图片路径增加键盘左右键按钮监听

main
滕嵩 2025-08-25 10:32:20 +08:00
parent f6f330c0b6
commit 72541ab687
2 changed files with 44 additions and 13 deletions

View File

@ -72,12 +72,22 @@
<CloseOutlined @click="closePathImageInfo" style="font-size: 20px; color: white" />
</div>
<!-- 上一张下一张图片 -->
<a-tooltip placement="top">
<template #title>
<span>可以使用键盘左右键切换</span>
</template>
<div class="leftButton" @click="clickLeftOrRightButton('left')">
<LeftOutlined style="color: #ffffff; font-size: 20px" />
</div>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>可以使用键盘左右键切换</span>
</template>
<div class="rightButton" @click="clickLeftOrRightButton('right')">
<RightOutlined style="color: #ffffff; font-size: 20px" />
</div>
</a-tooltip>
<!-- 涂鸦颜色选择-提示 -->
<div @click="setGraffiti" :class="graffitiFlag ? 'graffitiButton_choose' : 'graffitiButton'">
@ -1247,6 +1257,12 @@
if (event.code === 'Escape' && graffitiFlag.value) {
setGraffiti();
}
if (event.code == 'ArrowLeft') {
clickLeftOrRightButton('left');
}
if (event.code == 'ArrowRight') {
clickLeftOrRightButton('right');
}
};
//

View File

@ -372,13 +372,22 @@
</div>
<!-- 上一张下一张图片 -->
<a-tooltip placement="top">
<template #title>
<span>可以使用键盘左右键切换</span>
</template>
<div class="leftButton" @click="clickLeftOrRightButton('left')">
<LeftOutlined style="color: #ffffff; font-size: 20px" />
</div>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>可以使用键盘左右键切换</span>
</template>
<div class="rightButton" @click="clickLeftOrRightButton('right')">
<RightOutlined style="color: #ffffff; font-size: 20px" />
</div>
</a-tooltip>
<!-- 涂鸦颜色选择-提示 -->
<div @click="setGraffiti" :class="graffitiFlag ? 'graffitiButton_choose' : 'graffitiButton'">
<a-popover placement="left">
@ -1051,6 +1060,12 @@
if (event.code === 'Escape' && graffitiFlag.value) {
setGraffiti();
}
if (event.code == 'ArrowLeft') {
clickLeftOrRightButton('left');
}
if (event.code == 'ArrowRight') {
clickLeftOrRightButton('right');
}
};
//