帮我看看为什么pdf无法拖动
<template>
<Teleport to="body">
<div v
-if="visible" class="pdf
-mask" @mousedown="startDrag">
<div ref="modalRef" class="pdf
-modal" :style="modalStyle">
<div class="pdf
-header">
<span class="title">报关资料</span>
<div class="tools">
<el
-button size="small" @click="zoomIn">放大</el
-button>
<el
-button size="small" @click="zoomOut">缩小</el
-button>
<el
-button size="small" @click="close">关闭</el
-button>
</div>
</div>
<!
-- 滚动容器
-->
<el
-tabs v
-model="activeTab" class="pdf
-tabs">
<el
-tab
-pane v
-for="tab in tabs" :key="tab.id" :label="tab.name" :name="tab.id">
<!
-- 单个 PDF 容器
-->
<div class="pdf
-body" ref="scrollRef"
@wheel.prevent="handleWheel($event, tab.id)"
@mousedown="onPdfMouseDown">
<div :ref="(el) => setPdf
Container(tab.id, el)" />
</div>
</el
-tab
-pane>
</el
-tabs>
</div>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted } from 'vue'
import * as pdfjsLib from 'pdfjs
-dist'
import pdfjsWorker from 'pdfjs
-dist/build/pdf.worker?worker&url'
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
const emit = defineEmits<{
(e: 'update:visible', v: boolean): void
(e: 'tabschange', id: string | number): void
}>()
const pdfRealSize = ref({ width: 0, height: 0 })
/* tabs 数据 */
const tabs = ref<Array<{ id: string | number, name: string, url: string }>>([])
const activeTab = ref<string | number>('')
async function openWithTabs(
list: Array<{ code: string; name: string; url: string }>
) {
tabs.value = list
.filter((i) => i.name !== 'all_files')
.map((i) => ({ id: i.code, name: i.name, url: i.url }))
const firstId = tabs.value[0]?.id
activeTab.value = firstId ?? ''
// 手动让弹窗显示
emit('update:visible', true)
// 等 DOM 更新完，立即渲染第一页
await nextTick()
if (firstId) {
const
container = pdf
ContainerMap.get(firstId)
const tab = tabs.value.find((t) => t.id === firstId)
if (
container && tab) {
await renderSinglePDF(tab.url,
container)
}
}
// 弹框居中
const cw = window.innerWidth,
ch = window.innerHeight
modalStyle.left = (cw
- 800) / 2 + 'px'
modalStyle.top = (ch
- 600) / 2 + 'px'
}
const pdf
ContainerMap = new Map<string | number, HTMLDivElement>()
function setPdf
Container(id: string | number, el: any) {
if (el) pdf
ContainerMap.set(id, el as HTMLDivElement)
}
watch(activeTab, (id) => {
const tab = tabs.value.find(t => t.id === id)
if (!tab) return
renderSinglePDF(tab.url, pdf
ContainerMap.get(id)!)
})
/*
---------------- props & emits
---------------- */
const props = defineProps<{
visible: boolean
url?: string
highlight?: { x0: number; y0: number; x1: number; y1: number } | null
}>()
/*
---------------- 弹窗位置
---------------- */
const modalRef = ref<HTMLDivElement>()
const pdf
Container = ref<HTMLDivElement>()
const scrollRef = ref<HTMLDivElement>()
const modalStyle = reactive({
left: '0px',
top: '0px',
width: '800px',
height: '600px',
cursor: 'default'
})
let dragStart: { x: number; y: number } | null = null
/*
---------------- 拖拽
---------------- */
function startDrag(e: MouseEvent) {
const target = e.target as HTMLElement
if (!target.classList.contains('pdf
-mask') && !target.closest('.pdf
-header')) return
if (!modalRef.value) return
dragStart = { x: e.clientX, y: e.clientY }
modalStyle.cursor = 'grabbing'
document.addEventListener('mousemove', onDrag)
document.addEventListener('mouseup', stopDrag)
e.preventDefault()
}
function onDrag(e: MouseEvent) {
if (!dragStart) return
const dx = e.clientX
- dragStart.x
const dy = e.clientY
- dragStart.y
modalStyle.left = parseFloat(modalStyle.left) + dx + 'px'
modalStyle.top = parseFloat(modalStyle.top) + dy + 'px'
dragStart = { x: e.clientX, y: e.clientY }
}
function stopDrag() {
dragStart = null
modalStyle.cursor = 'default'
document.removeEventListener('mousemove', onDrag)
document.removeEventListener('mouseup', stopDrag)
if (modalRef.value) {
modalStyle.width = modalRef.value.offsetWidth + 'px'
modalStyle.height = modalRef.value.offsetHeight + 'px'
}
}
/*
---------------- 缩放
---------------- */
// 每个 tab 独立缩放比例
const tabScale = new Map<string | number, number>()
const getScale = (id: string | number) => tabScale.get(id) ?? 1
const setScale = (id: string | number, v: number) =>
tabScale.set(id, Math.min(Math.max(v, 0.5), 3))
// 放大 / 缩小
const zoomIn = () => { setScale(activeTab.value, getScale(activeTab.value) + 0.2); rerenderActiveTab() }
const zoomOut = () => { setScale(activeTab.value, getScale(activeTab.value)
- 0.2); rerenderActiveTab() }
// 重新渲染当前 tab
async function rerenderActiveTab() {
const id = activeTab.value
const tab = tabs.value.find(t => t.id === id)
const
container = pdf
ContainerMap.get(id)
if (tab &&
container) await renderSinglePDF(tab.url,
container)
}
// 鼠标滚轮缩放
async function handleWheel(e: WheelEvent, tabId: string | number) {
e.preventDefault()
e.stopPropagation()
// 获取当前tab的容器
const
container = pdf
ContainerMap.get(tabId)
if (!
container) return
// 获取滚动容器
const scroll
Container =
container.parentElement
if (!scroll
Container) return
// 获取鼠标在滚动容器中的位置
const rect = scroll
Container.getBoundingClientRect()
const mouseX = e.clientX
- rect.left + scroll
Container.scrollLeft
const mouseY = e.clientY
- rect.top + scroll
Container.scrollTop
// 获取当前缩放比例
const currentScale = getScale(tabId)
// 计算新的缩放比例
const delta = e.deltaY > 0 ?
-0.1 : 0.1
const newScale = Math.min(Math.max(currentScale + delta, 0.5), 3)
// 如果缩放比例没有变化，直接返回
if (Math.abs(newScale
- currentScale) < 0.01) return
// 保存当前滚动位置和鼠标位置
const scrollLeft = scroll
Container.scrollLeft
const scrollTop = scroll
Container.scrollTop
// 更新缩放比例
setScale(tabId, newScale)
// 重新渲染PDF
const tab = tabs.value.find(t => t.id === tabId)
if (tab) {
await renderSinglePDF(tab.url,
container)
// 重新计算滚动位置，保持鼠标位置不变
const scaleRatio = newScale / currentScale
const newScrollLeft = mouseX * scaleRatio
- (e.clientX
- rect.left)
const newScrollTop = mouseY * scaleRatio
- (e.clientY
- rect.top)
// 设置新的滚动位置
scroll
Container.scrollTo({
left: newScrollLeft,
top: newScrollTop
})
}
}
// renderSinglePDF 改用当前 tab 的 scale
let base
Viewport: pdfjsLib.Page
Viewport | null = null
const tabBase
Viewport = new Map<string | number, pdfjsLib.Page
Viewport>()
async function renderSinglePDF(url: string,
container: HTMLDivElement) {
if (!
container) return
container.innerHTML = ''
const pdf = await pdfjsLib.getDocument(url).promise
const page = await pdf.getPage(1)
base
Viewport = page.get
Viewport({ scale: 1 }) // ← 保存原始
viewport
tabBase
Viewport.set(activeTab.value, base
Viewport)
const scale = getScale(activeTab.value) * (800 / base
Viewport.width)
const vp = page.get
Viewport({ scale })
const canvas = document.createElement('canvas')
canvas.width = vp.width
canvas.height = vp.height
const ctx = canvas.getContext('2d')!
container.appendChild(canvas)
await page.render({
canvasContext: ctx,
viewport: vp,
canvas
}).promise;
// 新增：更新滚动容器尺寸
pdfRealSize.value = { width: vp.width, height: vp.height }
const scrollBox =
container.parentElement as HTMLDivElement
if (scrollBox) {
scrollBox.style.width = vp.width + 'px'
scrollBox.style.height = vp.height + 'px'
}
}
/*
---------------- PDF 逻辑宽高
---------------- */
const pdfLogicWidth = ref(0)
const pdfLogicHeight = ref(0)
/*
---------------- PDF 渲染
---------------- */
async function renderPDF() {
if (!pdf
Container.value || !props.url) return
pdf
Container.value.innerHTML = ''
try {
const pdf = await pdfjsLib.getDocument(props.url).promise
const page = await pdf.getPage(1)
const base
Viewport = page.get
Viewport({ scale: 1 })
pdfLogicWidth.value = base
Viewport.width
pdfLogicHeight.value = base
Viewport.height
const
viewport = page.get
Viewport({ scale: (800 / pdfLogicWidth.value) })
const canvas = document.createElement('canvas')
canvas.width =
viewport.width
canvas.height =
viewport.height
const ctx = canvas.getContext('2d')!
pdf
Container.value.appendChild(canvas)
await page.render({ canvasContext: ctx,
viewport, canvas }).promise
if (props.highlight) drawHighlight(props.highlight)
} catch (err) {
console.error('Failed to load PDF:', err)
}
}
/*
---------------- 高亮 + 自动滚动
---------------- */
function drawHighlight(rect: { x0: number; y0: number; x1: number; y1: number }) {
const id = activeTab.value
const
container = pdf
ContainerMap.get(id)
const scroll
Container =
container?.parentElement as HTMLDivElement
if (!
container || !scroll
Container) return
// 清除旧高亮
container.querySelectorAll('.pdf
-highlight').forEach(el => el.remove())
const canvas =
container.querySelector('canvas')
if (!canvas) return
const canvasScale = parseFloat(canvas.dataset.scale || '1')
const base
Viewport = tabBase
Viewport.get(id)
if (!base
Viewport) return
// 将 PDF 原始坐标 → canvas 渲染坐标
const sx = canvas.width / base
Viewport.width
const sy = canvas.height / base
Viewport.height
const hlLeft = rect.x0 * sx
const hlTop = rect.y0 * sy
const hlWidth = (rect.x1
- rect.x0) * sx
const hlHeight = (rect.y1
- rect.y0) * sy
const div = document.createElement('div')
div.className = 'pdf
-highlight'
Object.assign(div.style, {
position: 'absolute',
left: hlLeft + 'px',
top: hlTop + 'px',
width: hlWidth + 'px',
height: hlHeight + 'px',
background: 'rgba(0,255,0,0.4)',
border: '2px dashed #ff4d4f',
pointerEvents: 'none',
zIndex: 9999
})
container.style.position = 'relative'
container.appendChild(div)
/* 自动滚动 */
nextTick(() => {
const contW = scroll
Container.clientWidth
const contH = scroll
Container.clientHeight
scroll
Container.scrollTo({
left: Math.max(0, hlLeft + hlWidth / 2
- contW / 2),
top: Math.max(0, hlTop + hlHeight / 2
- contH / 2),
behavior: 'smooth'
})
})
}
/*
---------------- 拖拽 PDF 内容
---------------- */
let pdfDragging = false
let pdfDragStart = { x: 0, y: 0 }
let scrollStart = { left: 0, top: 0 }
function onPdfMouseDown(e: MouseEvent) {
const
container = scrollRef.value
if (!
container) return
// 只有在放大时才允许拖动
const scale = getScale(activeTab.value)
if (scale <= 1) return
// 检查是否点击在高亮区域上
const target = e.target as HTMLElement
if (target.classList.contains('pdf
-highlight')) return
pdfDragging = true
pdfDragStart = { x: e.clientX, y: e.clientY }
scrollStart = { left:
container.scrollLeft, top:
container.scrollTop }
document.addEventListener('mousemove', onPdfMouseMove)
document.addEventListener('mouseup', onPdfMouseUp)
container.style.cursor = 'grabbing'
e.preventDefault()
}
function onPdfMouseMove(e: MouseEvent) {
if (!pdfDragging) return
const dx = e.clientX
- pdfDragStart.x
const dy = e.clientY
- pdfDragStart.y
const
container = scrollRef.value
if (
container) {
container.scrollTo({
left: scrollStart.left
- dx,
top: scrollStart.top
- dy
})
}
}
function onPdfMouseUp() {
pdfDragging = false
document.removeEventListener('mousemove', onPdfMouseMove)
document.removeEventListener('mouseup', onPdfMouseUp)
if (scrollRef.value) {
scrollRef.value.style.cursor = 'default'
}
}
/*
---------------- 监听 visible
---------------- */
watch(
() => props.visible,
async (v, ov) => {
if (!v) { return }
await nextTick()
if (ov === false) {
const cw = window.innerWidth
const ch = window.innerHeight
const mw = 800
const mh = 600
modalStyle.left = (cw
- mw) / 2 + 'px'
modalStyle.top = (ch
- mh) / 2 + 'px'
}
renderPDF()
},
{ immediate: true }
)
/*
---------------- 关闭
---------------- */
function close() {
pdfRealSize.value = { width: 0, height: 0 }
emit('update:visible', false)
}
/*
---------------- 监听 highlight
---------------- */
watch(
() => props.highlight,
(newVal) => {
if (newVal) drawHighlight(newVal)
},
{ immediate: false }
)
watch(activeTab, (id) => {
const tab = tabs.value.find(t => t.id === id)
if (!tab) return
emit('tabschange', id)
renderSinglePDF(tab.url, pdf
ContainerMap.get(id)!)
})
function drawHighlightByCoords(rect: { x0: number; y0: number; x1: number; y1: number }) {
drawHighlight(rect)
}
onMounted(async () => {
await nextTick();
const scroll
Container = scrollRef.value;
if (scroll
Container) {
scroll
Container.addEventListener('mousedown', onPdfMouseDown);
}
});
defineExpose({ openWithTabs, drawHighlight: drawHighlightByCoords })
</script>
<style scoped>
.pdf
-mask {
position: fixed;
inset: 0;
z
-index: 9999;
pointer
-events: none;
}
.pdf
-modal {
position: absolute;
background: #fff;
border: 1px solid #ccc;
border
-radius: 4px;
box
-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
display: flex;
flex
-direction: column;
pointer
-events: auto;
min
-width: 400px;
min
-height: 300px;
resize: both;
overflow: hidden;
}
.pdf
-header {
display: flex;
justify
-content: space
-between;
align
-items: center;
padding: 8px 12px;
background: #f5f5f5;
cursor: grab;
border
-bottom: 1px solid #e4e4e4;
user
-select: none;
}
.pdf
-header:active {
cursor: grabbing;
}
.pdf
-body {
flex: none;
overflow: auto;
cursor: grab;
}
.pdf
-body:active {
cursor: grabbing;
}
.pdf
-body canvas {
pointer
-events: none;
}
.pdf
-modal {
height: 700px;
}
</style>
本文探讨了在特定UI框架中Viewport与Container之间的消息传递机制，分析了不同触摸模式下的消息处理方式及其引发的问题，包括消息传递中断及子控件接收不到消息等现象。
扫一扫
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
