Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-10-22 12:15:14 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
bf8de59b9307eafc1d1e9e0c3adc7e02c04feb59
bf8de59b
1 parent
3e176133
feat(PdfViewer): 添加页码跳转功能
实现页码显示和跳转功能,包括当前页/总页数显示和输入框跳转 处理PDF初始化时的总页数获取和页码边界检查
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
118 additions
and
3 deletions
src/components/ui/PdfViewer.vue
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;
...
...
Please
register
or
login
to post a comment