feat(PdfViewer): 添加页码跳转功能

实现页码显示和跳转功能，包括当前页/总页数显示和输入框跳转处理PDF初始化时的总页数获取和页码边界检查

feat(PdfViewer): 添加页码跳转功能
实现页码显示和跳转功能，包括当前页/总页数显示和输入框跳转处理PDF初始化时的总页数获取和页码边界检查
hookehuyr
Commit bf8de59b9307eafc1d1e9e0c3adc7e02c04feb59 bf8de59b 1 parent 3e176133
Showing 1 changed file with 118 additions and 3 deletions
src/components/ui/PdfViewer.vue
--- a/src/components/ui/PdfViewer.vue
View file @bf8de59
+++ b/src/components/ui/PdfViewer.vue
View file @bf8de59
@@ -21,7 +21,7 @@
                     :scrollThreshold="300"
                     :pdfWidth="`${Math.round(100 * zoomLevel)}%`"
                     :rowGap="8"
-                    :page="1"
+                    :page="currentPage"
                     :cMapUrl="'https://unpkg.com/pdfjs-dist@3.7.107/cmaps/'"
                     :withCredentials="false"
                     :useSystemFonts="true"
@@ -56,7 +56,20 @@
             <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" />
-                <div class="zoom-level">{{ Math.round(zoomLevel * 100) }}%</div>
+                <div class="page-jump" @click="focusPageInput">
+                    <span class="page-display">{{ currentPage }}/{{ totalPages || 0 }}</span>
+                    <input 
+                        ref="pageInputRef"
+                        class="page-input" 
+                        type="number" 
+                        :min="1" 
+                        :max="totalPages || 1" 
+                        v-model="pageInput" 
+                        @blur="handlePageInputBlur"
+                        @keyup.enter="handlePageInputBlur"
+                        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-reset-btn" type="default" round @click="resetZoom">
                     <van-icon name="replay" size="16" />
@@ -130,6 +143,42 @@ const zoomLevel = ref(1); // 缩放级别，1为100%
 const scrollPosition = ref({ x: 0, y: 0 }); // 记录滚动位置
 const pdfRef = ref(null); // PDF组件引用
+// 页码控制
+const currentPage = ref(1);
+const totalPages = ref(0);
+const pageInput = ref('');
+const isEditingPage = ref(false);
+const pageInputRef = ref(null);
+
+/**
+ * 处理页码输入框失焦事件
+ */
+const handlePageInputBlur = () => {
+    const inputValue = parseInt(pageInput.value);
+    if (!isNaN(inputValue)) {
+        const validPage = Math.max(1, Math.min(inputValue, totalPages.value || 1));
+        currentPage.value = validPage;
+    }
+    pageInput.value = '';
+    isEditingPage.value = false;
+};
+
+/**
+ * 点击页码显示区域，切换到编辑模式
+ */
+const focusPageInput = () => {
+    if (!isEditingPage.value) {
+        isEditingPage.value = true;
+        pageInput.value = currentPage.value.toString();
+        nextTick(() => {
+            if (pageInputRef.value) {
+                pageInputRef.value.focus();
+                pageInputRef.value.select();
+            }
+        });
+    }
+};
+
 // 超时处理相关
 const loadingTimeout = ref(30000); // 超时时间，默认30秒
 const timeoutTimer = ref(null); // 超时计时器
@@ -270,7 +319,8 @@ const handleScroll = (scrollOffset) => {
  * @param {number} page - 当前页码
  */
 const handlePageChange = (page) => {
-    // 可以在这里处理页面变化事件
+    const p = Number(page) || 1;
+    currentPage.value = p;
 };
 /**
@@ -283,6 +333,18 @@ const handlePdfInit = (pdf) => {
     // PDF初始化完成后的处理
     loadingError.value = false;
+
+    // 记录总页数
+    try {
+        const num = (pdf && typeof pdf.numPages === 'number') ? pdf.numPages : 0;
+        if (num > 0) {
+            totalPages.value = num;
+            if (currentPage.value > num) currentPage.value = num;
+        }
+    } catch (e) {
+        // 忽略无法获取页数的情况
+    }
+
     nextTick(() => {
         if (props.preventSave) {
             // 添加防止保存的事件监听器
@@ -685,6 +747,59 @@ const addPreventSaveListeners = () => {
     line-height: 1.4;
 }
+.page-jump {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    min-width: 60px;
+    height: 32px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 16px;
+    padding: 0 12px;
+}
+
+.page-display {
+    color: white;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.page-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    border: 2px solid #1989fa;
+    border-radius: 16px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    outline: none;
+}
+
+.page-input::-webkit-outer-spin-button,
+.page-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.page-input[type=number] {
+    -moz-appearance: textfield;
+}
+
+.page-jump:hover {
+    background: rgba(0, 0, 0, 0.8);
+}
+
 /* 错误状态样式 */
 .error-container {
     display: flex;