Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f0024d57 1 parent 8f0be273

feat(PdfViewer): 添加放大缩小图标并优化缩放功能 

将PDF查看器的缩放按钮从Vant组件替换为FontAwesome图标
添加faMagnifyingGlassPlus和faMagnifyingGlassMinus图标
优化双指缩放的手势处理逻辑
Inline Side-by-side
Showing 2 changed files with 7 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2025-01-21 2 * @Date: 2025-01-21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-10-22 12:17:03 4 + * @LastEditTime: 2025-10-22 13:28:38
5 * @FilePath: /mlaj/src/components/ui/PdfViewer.vue 5 * @FilePath: /mlaj/src/components/ui/PdfViewer.vue
6 * @Description: PDF预览组件 - 使用pdf-vue3库 6 * @Description: PDF预览组件 - 使用pdf-vue3库
7 --> 7 -->
...@@ -55,7 +55,8 @@ ...@@ -55,7 +55,8 @@
55 <!-- 缩放控制按钮 --> 55 <!-- 缩放控制按钮 -->
56 <div v-if="!loading && !loadingError" class="zoom-controls"> 56 <div v-if="!loading && !loadingError" class="zoom-controls">
57 <van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" /> 57 <van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" />
58 - <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" /> 58 + <!-- <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" /> -->
59 + <font-awesome-icon icon="magnifying-glass-plus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomIn" />
59 <div class="page-jump" @click="focusPageInput"> 60 <div class="page-jump" @click="focusPageInput">
60 <span class="page-display">{{ currentPage }}/{{ totalPages || 0 }}</span> 61 <span class="page-display">{{ currentPage }}/{{ totalPages || 0 }}</span>
61 <input 62 <input
...@@ -70,7 +71,8 @@ ...@@ -70,7 +71,8 @@
70 v-show="isEditingPage" 71 v-show="isEditingPage"
71 /> 72 />
72 </div> 73 </div>
73 - <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" /> 74 + <!-- <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" /> -->
75 + <font-awesome-icon icon="magnifying-glass-minus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomOut" />
74 <van-button class="zoom-btn zoom-reset-btn" type="default" round @click="resetZoom"> 76 <van-button class="zoom-btn zoom-reset-btn" type="default" round @click="resetZoom">
75 <van-icon name="replay" size="16" /> 77 <van-icon name="replay" size="16" />
76 </van-button> 78 </van-button>
......
...@@ -18,10 +18,10 @@ import { library } from '@fortawesome/fontawesome-svg-core' ...@@ -18,10 +18,10 @@ import { library } from '@fortawesome/fontawesome-svg-core'
18 /* import font awesome icon component */ 18 /* import font awesome icon component */
19 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 19 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
20 /* import specific icons */ 20 /* import specific icons */
21 -import { faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt, faTimes, faEye, faFilePdf, faExternalLinkAlt, faSpinner, faExclamationCircle, faDownload, faVenus, faMars } from '@fortawesome/free-solid-svg-icons' 21 +import { faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt, faTimes, faEye, faFilePdf, faExternalLinkAlt, faSpinner, faExclamationCircle, faDownload, faVenus, faMars, faMagnifyingGlassPlus, faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons'
22 22
23 /* add icons to the library */ 23 /* add icons to the library */
24 -library.add(faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt, faTimes, faEye, faFilePdf, faExternalLinkAlt, faSpinner, faExclamationCircle, faDownload, faVenus, faMars ) 24 +library.add(faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt, faTimes, faEye, faFilePdf, faExternalLinkAlt, faSpinner, faExclamationCircle, faDownload, faVenus, faMars, faMagnifyingGlassPlus, faMagnifyingGlassMinus )
25 25
26 if (!Array.prototype.at) { 26 if (!Array.prototype.at) {
27 Array.prototype.at = function(n) { 27 Array.prototype.at = function(n) {
......