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

将PDF查看器的缩放按钮从Vant组件替换为FontAwesome图标添加faMagnifyingGlassPlus和faMagnifyingGlassMinus图标优化双指缩放的手势处理逻辑

feat(PdfViewer): 添加放大缩小图标并优化缩放功能
将PDF查看器的缩放按钮从Vant组件替换为FontAwesome图标添加faMagnifyingGlassPlus和faMagnifyingGlassMinus图标优化双指缩放的手势处理逻辑
hookehuyr
Commit f0024d573b75ba15d9e470c5dd37759ac1b4cc65 f0024d57 1 parent 8f0be273
Showing 2 changed files with 16 additions and 14 deletions
src/components/ui/PdfViewer.vue
src/main.js
--- a/src/components/ui/PdfViewer.vue
View file @f0024d5
+++ b/src/components/ui/PdfViewer.vue
View file @f0024d5
 <!--
  * @Date: 2025-01-21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-22 12:17:03
+ * @LastEditTime: 2025-10-22 13:28:38
  * @FilePath: /mlaj/src/components/ui/PdfViewer.vue
  * @Description: PDF预览组件 - 使用pdf-vue3库
 -->
@@ -55,7 +55,8 @@
             <!-- 缩放控制按钮 -->
             <div v-if="!loading && !loadingError" class="zoom-controls">
                 <van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" />
-                <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" />
+                <!-- <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" /> -->
+                <font-awesome-icon icon="magnifying-glass-plus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomIn" />
                 <div class="page-jump" @click="focusPageInput">
                     <span class="page-display">{{ currentPage }}/{{ totalPages || 0 }}</span>
                     <input
@@ -70,7 +71,8 @@
                         v-show="isEditingPage"
                     />
                 </div>
-                <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" />
+                <!-- <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" /> -->
+                <font-awesome-icon icon="magnifying-glass-minus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomOut" />
                 <van-button class="zoom-btn zoom-reset-btn" type="default" round @click="resetZoom">
                     <van-icon name="replay" size="16" />
                 </van-button>
@@ -570,7 +572,7 @@ const addPinchZoomListeners = (container) => {
     // 触摸开始
     container.addEventListener('touchstart', (e) => {
         touches = Array.from(e.touches);
-        
+
         if (touches.length === 2) {
             // 双指触摸开始
             e.preventDefault();
@@ -587,21 +589,21 @@ const addPinchZoomListeners = (container) => {
     container.addEventListener('touchmove', (e) => {
         if (e.touches.length === 2 && isZooming) {
             e.preventDefault();
-            
+
             const currentTouches = Array.from(e.touches);
             const currentDistance = getDistance(currentTouches[0], currentTouches[1]);
             const scale = currentDistance / initialDistance;
-            
+
             // 计算新的缩放级别
             let newZoom = initialZoom * scale;
             newZoom = Math.max(0.5, Math.min(3, newZoom)); // 限制缩放范围
-            
+
             // 获取缩放中心点
             const center = getCenter(currentTouches[0], currentTouches[1]);
             const rect = container.getBoundingClientRect();
             const centerX = center.x - rect.left;
             const centerY = center.y - rect.top;
-            
+
             // 应用缩放
             applyPinchZoom(newZoom, centerX, centerY, container);
         }
@@ -631,18 +633,18 @@ const applyPinchZoom = (newZoom, centerX, centerY, container) => {
     const oldZoom = zoomLevel.value;
     const oldScrollLeft = container.scrollLeft;
     const oldScrollTop = container.scrollTop;
-    
+
     // 更新缩放级别
     zoomLevel.value = newZoom;
-    
+
     // 等待DOM更新后调整滚动位置
     nextTick(() => {
         const zoomRatio = newZoom / oldZoom;
-        
+
         // 计算新的滚动位置，以缩放中心为锚点
         const newScrollLeft = (oldScrollLeft + centerX) * zoomRatio - centerX;
         const newScrollTop = (oldScrollTop + centerY) * zoomRatio - centerY;
-        
+
         // 应用新的滚动位置
         container.scrollLeft = Math.max(0, newScrollLeft);
         container.scrollTop = Math.max(0, newScrollTop);
--- a/src/main.js
View file @f0024d5
+++ b/src/main.js
View file @f0024d5
@@ -18,10 +18,10 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 /* import font awesome icon component */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 /* import specific icons */
-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'
+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'
 /* add icons to the library */
-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 )
+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 )
 if (!Array.prototype.at) {
   Array.prototype.at = function(n) {