hookehuyr

feat(PdfViewer): 添加缩放时保持滚动位置功能

在PDF查看器中添加滚动位置记录功能,当用户进行缩放操作时,会基于当前视口中心点计算并保持相对滚动位置,提升用户体验
......@@ -110,6 +110,7 @@ const loadingProgress = ref(0);
const loadingError = ref(false);
const errorMessage = ref('');
const zoomLevel = ref(1); // 缩放级别,1为100%
const scrollPosition = ref({ x: 0, y: 0 }); // 记录滚动位置
/**
* 监听show属性变化,控制PDF加载
......@@ -171,7 +172,14 @@ const handleComplete = () => {
* @param {number} scrollOffset - 滚动偏移量
*/
const handleScroll = (scrollOffset) => {
// 可以在这里处理滚动事件
// 记录当前滚动位置
const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
if (pdfContainer) {
scrollPosition.value = {
x: pdfContainer.scrollLeft,
y: pdfContainer.scrollTop
};
}
};
/**
......@@ -237,7 +245,29 @@ const retryLoad = () => {
*/
const zoomIn = () => {
if (zoomLevel.value < 3) { // 最大放大到300%
zoomLevel.value = Math.min(3, zoomLevel.value + 0.25);
// 记录缩放前的滚动位置
const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
if (pdfContainer) {
const centerX = pdfContainer.scrollLeft + pdfContainer.clientWidth / 2;
const centerY = pdfContainer.scrollTop + pdfContainer.clientHeight / 2;
const oldZoom = zoomLevel.value;
zoomLevel.value = Math.min(3, zoomLevel.value + 0.25);
const newZoom = zoomLevel.value;
// 使用nextTick确保DOM更新后再调整滚动位置
nextTick(() => {
const zoomRatio = newZoom / oldZoom;
const newScrollLeft = centerX * zoomRatio - pdfContainer.clientWidth / 2;
const newScrollTop = centerY * zoomRatio - pdfContainer.clientHeight / 2;
pdfContainer.scrollTo({
left: Math.max(0, newScrollLeft),
top: Math.max(0, newScrollTop),
behavior: 'smooth'
});
});
}
}
};
......@@ -246,7 +276,29 @@ const zoomIn = () => {
*/
const zoomOut = () => {
if (zoomLevel.value > 0.5) { // 最小缩小到50%
zoomLevel.value = Math.max(0.5, zoomLevel.value - 0.25);
// 记录缩放前的滚动位置
const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
if (pdfContainer) {
const centerX = pdfContainer.scrollLeft + pdfContainer.clientWidth / 2;
const centerY = pdfContainer.scrollTop + pdfContainer.clientHeight / 2;
const oldZoom = zoomLevel.value;
zoomLevel.value = Math.max(0.5, zoomLevel.value - 0.25);
const newZoom = zoomLevel.value;
// 使用nextTick确保DOM更新后再调整滚动位置
nextTick(() => {
const zoomRatio = newZoom / oldZoom;
const newScrollLeft = centerX * zoomRatio - pdfContainer.clientWidth / 2;
const newScrollTop = centerY * zoomRatio - pdfContainer.clientHeight / 2;
pdfContainer.scrollTo({
left: Math.max(0, newScrollLeft),
top: Math.max(0, newScrollTop),
behavior: 'smooth'
});
});
}
}
};
......@@ -254,7 +306,21 @@ const zoomOut = () => {
* 重置缩放
*/
const resetZoom = () => {
zoomLevel.value = 1;
const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
if (pdfContainer) {
// 重置到顶部中央位置
zoomLevel.value = 1;
nextTick(() => {
pdfContainer.scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
});
});
} else {
zoomLevel.value = 1;
}
};
/**
......