<template>
<T
eleport to="body">
<div v
-if="visible" class="pdf
-mask" @mousedown="startDrag">
<div ref="modalRef" class="pdf
-modal" :style="modalStyle">
<!
-- PDF 头部：标题 + 操作按钮
-->
<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>
<!
-- PDF 标签页 + 内容区域
-->
<
el-tabs v
-model="activeTab" class="pdf
-tabs" @tab
-click="handleTabClick">
<
el-tab
-pane
v
-for="tab in tabs"
:key="tab
.id"
:lab
el="tab
.name"
:name="tab
.id
.toString()" <!
-- 统一为字符串，避免
el-tabs 类型警告
-->
>
<!
-- 单个 PDF 滚动容器（每个 tab 独立 ref，修复类型断言）
-->
<div
class="pdf
-body"
:ref="(
el) =>
el && scrollRefMap
.set(tab
.id,
el as
HTMLDiv
Element)" <!
-- 显式类型断言
-->
@whe
el="(e) => onWhe
el(e, tab
.id)"
@mousedown="(e) => onPdfMouseDown(e, tab
.id)"
>
<!
-- PDF 渲染容器（每个 tab 独立存储，修复类型断言）
-->
<div :ref="(
el) =>
el && setPdfContainer(tab
.id,
el as
HTMLDiv
Element)" />
</div>
</
el-tab
-pane>
</
el-tabs>
</div>
</div>
</T
eleport>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onUnmounted } from &#
39;
vue&#
39;
import type { CSSProperties } from &#
39;
vue&#
39; // 导入 CSS 类型
import * as pdf
jsLib from &#
39;pdf
js-dist&#
39;
import pdf
jsWorker from &#
39;pdf
js-dist/build/pdf
.worker?worker&url&#
39;
// 导入 pdf
js 核心类型（解决 PDFLoadingTask/promise 类型错误）
import type {
PDFLoadingTask,
PDFDocumentProxy,
PageViewport,
RenderTask
} from &#
39;pdf
js-dist&#
39;
// 导入
Element Plus 组件（确保类型正确）
import {
ElButton,
ElTabs,
ElTabPane } from &#
39;
element-plus&#
39;
import type { TabsPaneContext } from &#
39;
element-plus&#
39;
// PDF
.js 初始化：设置 Worker
路径
pdf
jsLib
.GlobalWorkerOptions
.workerSrc = pdf
jsWorker
/*
---------------- Props &
Emits 定义
---------------- */
const
props = define
Props<{
visible: boolean
url?: string
highlight?: { x0: number; y0: number; x1: number; y1: number }
| null
}>()
const
emit = define
Emits<{
(e: &#
39;update:visible&#
39;, value: boolean): void
(e: &#
39;tabschange&#
39;, tabId: string
| number): void
}>()
/*
---------------- 状态管理（每个 tab 独立数据）
---------------- */
// 标签页数据：id/名称/PDF 地址
const tabs = ref<Array<{ id: string
| number; name: string; url: string }>>([])
// 当前激活的标签页（统一为字符串类型，适配
el-tabs）
const activeTab = ref<string>(&#
39;&#
39;)
// 每个 tab 的 PDF 渲染容器（DOM 引用，明确类型）
const pdfContainerMap = new Map<string
| number,
HTMLDiv
Element>()
// 每个 tab 的滚动容器（DOM 引用，明确类型）
const scrollRefMap = new Map<string
| number,
HTMLDiv
Element>()
// 每个 tab 的缩放比例（0
.5~
3 范围）
const tabScale = new Map<string
| number, number>()
// 每个 tab 的 PDF 原始视口（用于计算坐标，明确类型）
const tabBaseViewport = new Map<string
| number, PageViewport>()
// PDF 真实渲染尺寸
const pdfRealSize = ref({ width: 0, height: 0 })
// 弹窗 DOM 引用（明确类型）
const modalRef = ref<
HTMLDiv
Element | null>(null)
// 异步渲染中断控制器（防止切换 tab 时重复渲染）
let abortController: AbortController
| null = null
// 当前 PDF 拖拽对应的滚动容器（解决事件参数不匹配问题）
let currentScrollContainer:
HTMLDiv
Element | null = null
/*
---------------- 弹窗位置 & 样式（修复 cursor 类型）
---------------- */
// 显式声明 modalStyle 类型，cursor 支持所有 CSS cursor 值
const modalStyle = reactive<{
left: string
top: string
width: string
height: string
cursor: CSSProperties[&#
39;cursor&#
39;] // 关键：使用 CSS 原生 cursor 类型
}>({
left: &#
39;0px&#
39;,
top: &#
39;0px&#
39;,
width: &#
39;800px&#
39;,
height: &#
39;600px&#
39;,
cursor: &#
39;default&#
39; // 初始值符合类型
})
// 拖拽起始坐标
let dragStart: { x: number; y: number }
| null = null
/*
---------------- 标签页初始化 & 渲染
---------------- */
/**
* 打开 PDF 标签页（外部调用入口）
* @param list 标签页数据：code(唯一ID)/name(标签名)/url(PDF地址)
*/
async function openWithTabs(
list: Array<{ code: string; name: string; url: string }>
) {
// 1
. 清空历史数据（防止前一次残留导致重复）
tabs
.value = []
pdfContainerMap
.clear()
scrollRefMap
.clear()
tabScale
.clear()
tabBaseViewport
.clear()
if (abortController) {
abortController
.abort()
abortController = null
}
// 2
. 格式化标签页数据（过滤 all_files 项）
tabs
.value = list
.filter(item => item
.name !== &#
39;all_files&#
39;)
.map(item => ({ id: item
.code, name: item
.name, url: item
.url }))
//
3. 激活第一个标签页（转为字符串，适配
el-tabs）
const firstTabId = tabs
.value[0]?
.id
.toString() ?? &#
39;&#
39;
activeTab
.value = firstTabId
emit(&#
39;update:visible&#
39;, true)
// 4
. 等待 DOM 更新后，渲染第一个标签页的 PDF
await nextTick()
const firstTab = tabs
.value[0]
if (firstTab) {
const container = pdfContainerMap
.get(firstTab
.id)
if (container) {
await renderSinglePDF(firstTab
.url, container, firstTab
.id)
}
}
//
5. 弹窗居中显示
const windowWidth = window
.innerWidth
const windowHeight = window
.innerHeight
modalStyle
.left = `${(windowWidth
- 800) / 2}px`
modalStyle
.top = `${(windowHeight
- 600) / 2}px`
}
/**
* 绑定 PDF 容器到 Map（明确类型）
* @param tabId 标签页唯一ID
* @param
el DOM
元素（已断言为
HTMLDiv
Element）
*/
function setPdfContainer(tabId: string
| number,
el:
HTMLDiv
Element) {
pdfContainerMap
.set(tabId,
el)
}
/**
* 渲染单个标签页的 PDF（核心渲染逻辑，修复 pdf
js 类型）
* @param pdfUrl PDF 文件地址
* @param container 渲染容器（明确
HTMLDiv
Element 类型）
* @param currentTabId 当前标签页ID（防止异步渲染错位）
*/
async function renderSinglePDF(
pdfUrl: string,
container:
HTMLDiv
Element,
currentTabId: string
| number
) {
// 校验：当前标签页是否已切换，若切换则终止渲染
if (activeTab
.value !== currentTabId
.toString()) return
// 校验：容器是否合法
if (!(container instanceof
HTMLDiv
Element)) return
// 1
. 中断前一次未完成的渲染（解决重复加载）
if (abortController) {
abortController
.abort()
abortController = null
}
abortController = new AbortController()
// 2
. 清空容器（删除所有旧内容，防止残留）
container
.inner
HTML = &#
39;&#
39;
// 获取当前标签页的滚动容器
const scrollContainer = scrollRefMap
.get(currentTabId)
if (!scrollContainer) return
try {
//
3. 加载 PDF 文件（显式声明 PDFLoadingTask 类型，解决 promise 类型错误）
const pdfLoadingTask: PDFLoadingTask<PDFDocumentProxy> = pdf
jsLib
.getDocument({
url: pdfUrl,
signal: abortController
.signal
})
const pdfDoc = await pdfLoadingTask
.promise // 现在 TS 能识别 promise 属性
// 渲染第一页（显式声明 Page 类型）
const pdfPage = await pdfDoc
.getPage(1)
// 再次校验标签页（异步延迟防护）
if (activeTab
.value !== currentTabId
.toString()) return
// 4
. 计算渲染尺寸（基于当前标签页的缩放比例）
const baseViewport = pdfPage
.getViewport({ scale: 1 })
tabBaseViewport
.set(currentTabId, baseViewport)
const currentScale = tabScale
.get(currentTabId) ?? 1 // 默认缩放 1
// 基准宽度 800px，适配弹窗初始宽度
const renderScale = currentScale * (800 / baseViewport
.width)
const renderViewport = pdfPage
.getViewport({ scale: renderScale })
//
5. 创建 Canvas 并渲染 PDF
const canvas = document
.create
Element(&#
39;canvas&#
39;)
const ctx = canvas
.getContext(&#
39;2d&#
39;)
if (!ctx) {
container
.inner
HTML = &#
39;<div style="padding:20px;text
-align:center;color:#f
56c6c;">Canvas 初始化失败</div>&#
39;
return
}
canvas
.width = renderViewport
.width
canvas
.height = renderViewport
.height
canvas
.dataset
.scale = String(currentScale) // 存储当前缩放比例
container
.appendChild(canvas)
// 渲染 PDF 内容（显式声明 RenderTask 类型，解决参数类型警告）
const renderTask: RenderTask = pdfPage
.render({
canvasContext: ctx,
viewport: renderViewport,
signal: abortController
.signal
} as Parameters<typeof pdfPage
.render>[0]) // 类型断言匹配渲染参数
await renderTask
.promise
// 第三次校验标签页（渲染完成后防护）
if (activeTab
.value !== currentTabId
.toString()) {
container
.inner
HTML = &#
39;&#
39;
return
}
// 6
. 设置滚动容器尺寸（适配 PDF 渲染尺寸）
scrollContainer
.style
.width = `${renderViewport
.width}px`
scrollContainer
.style
.height = `${renderViewport
.height}px`
pdfRealSize
.value = {
width: renderViewport
.width,
height: renderViewport
.height
}
// 7
. 若有高亮需求，渲染高亮区域
if (
props.highlight) {
drawHighlight(
props.highlight, currentTabId)
}
} catch (error) {
// 忽略中断错误，其他错误提示
if ((error as Error)
.name !== &#
39;AbortError&#
39;) {
console
.error(`PDF 加载失败（标签页: ${currentTabId}）:`, error)
container
.inner
HTML = `<div style="padding:20px;text
-align:center;color:#f
56c6c;">PDF 加载失败，请重试</div>`
}
}
}
/*
---------------- 标签页切换 & 缩放
---------------- */
/**
* 切换标签页时触发（防止
el-tabs 自带事件与 watch 冲突）
*/
function handleTabClick(tab: TabsPaneContext) {
emit(&#
39;tabschange&#
39;, tab
.paneName)
}
/**
* 监听 activeTab 变化：切换标签页时重新渲染 PDF
*/
watch(activeTab, (newTabIdStr) => {
// 将字符串 tabId 转回原始类型（适配 Map 存储的 key）
const newTabId = tabs
.value
.find(tab => tab
.id
.toString() === newTabIdStr)?
.id
if (!newTabId) return
const targetTab = tabs
.value
.find(tab => tab
.id === newTabId)
const targetContainer = pdfContainerMap
.get(newTabId)
if (targetTab && targetContainer) {
renderSinglePDF(targetTab
.url, targetContainer, newTabId)
}
}, { immediate: false })
/**
* 放大 PDF（当前激活标签页）
*/
const zoomIn = () => {
const currentTabIdStr = activeTab
.value
const currentTabId = tabs
.value
.find(tab => tab
.id
.toString() === currentTabIdStr)?
.id
if (!currentTabId) return
// 缩放范围：0
.5 ~
3
const newScale = Math
.min((tabScale
.get(currentTabId) ?? 1) + 0
.2,
3)
tabScale
.set(currentTabId, newScale)
rerenderActiveTab()
}
/**
* 缩小 PDF（当前激活标签页）
*/
const zoomOut = () => {
const currentTabIdStr = activeTab
.value
const currentTabId = tabs
.value
.find(tab => tab
.id
.toString() === currentTabIdStr)?
.id
if (!currentTabId) return
// 缩放范围：0
.5 ~
3
const newScale = Math
.max((tabScale
.get(currentTabId) ?? 1)
- 0
.2, 0
.5)
tabScale
.set(currentTabId, newScale)
rerenderActiveTab()
}
/**
* 重新渲染当前激活的标签页
*/
async function rerenderActiveTab() {
const currentTabIdStr = activeTab
.value
const currentTabId = tabs
.value
.find(tab => tab
.id
.toString() === currentTabIdStr)?
.id
if (!currentTabId) return
const targetTab = tabs
.value
.find(tab => tab
.id === currentTabId)
const targetContainer = pdfContainerMap
.get(currentTabId)
if (targetTab && targetContainer) {
await renderSinglePDF(targetTab
.url, targetContainer, currentTabId)
}
}
/*
---------------- 弹窗拖拽功能
---------------- */
/**
* 开始拖拽弹窗（仅头部和遮罩区域触发）
*/
function startDrag(e: MouseEvent) {
const target = e
.target as
HTMLElement
// 仅允许点击遮罩或头部拖拽
if (!target
.classList
.contains(&#
39;pdf
-mask&#
39;) && !target
.closest(&#
39;
.pdf
-header&#
39;)) {
return
}
if (!modalRef
.value) return
dragStart = { x: e
.clientX, y: e
.clientY }
modalStyle
.cursor = &#
39;grabbing&#
39; // 现在类型兼容（CSSProperties[&#
39;cursor&#
39;] 支持）
// 绑定全局拖拽/停止事件（使用同一函数引用）
document
.addEventListener(&#
39;mousemove&#
39;, onDrag)
document
.addEventListener(&#
39;mouseup&#
39;, 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 = &#
39;default&#
39;
// 解绑全局事件（与绑定的函数一致）
document
.removeEventListener(&#
39;mousemove&#
39;, onDrag)
document
.removeEventListener(&#
39;mouseup&#
39;, stopDrag)
}
/*
---------------- PDF 内容拖拽（放大后支持，修复事件参数）
---------------- */
let isPdfDragging = false // 是否处于 PDF 拖拽状态
let pdfDragStart = { x: 0, y: 0 } // PDF 拖拽起始坐标
let scrollStart = { left: 0, top: 0 } // 滚动容器起始位置
/**
* PDF 内容鼠标按下：开始拖拽（仅放大时支持，存储当前滚动容器）
*/
function onPdfMouseDown(e: MouseEvent, tabId: string
| number) {
const scrollContainer = scrollRefMap
.get(tabId)
if (!scrollContainer) return
// 仅当缩放比例 >1 时允许拖拽
const currentScale = tabScale
.get(tabId) ?? 1
if (currentScale <= 1) return
isPdfDragging = true
pdfDragStart = { x: e
.clientX, y: e
.clientY }
scrollStart = {
left: scrollContainer
.scrollLeft,
top: scrollContainer
.scrollTop
}
// 存储当前拖拽对应的滚动容器（解决事件参数不匹配）
currentScrollContainer = scrollContainer
// 绑定全局拖拽/停止事件（使用无额外参数的函数）
document
.addEventListener(&#
39;mousemove&#
39;, onPdfMouseMove)
document
.addEventListener(&#
39;mouseup&#
39;, onPdfMouseUp)
e
.preventDefault()
}
/**
* PDF 内容拖拽中：更新滚动位置（不依赖外部参数，从状态获取容器）
*/
function onPdfMouseMove(e: MouseEvent) {
if (!isPdfDragging
|| !currentScrollContainer) return
const dx = e
.clientX
- pdfDragStart
.x
const dy = e
.clientY
- pdfDragStart
.y
// 反向滚动（拖拽方向与滚动方向相反）
currentScrollContainer
.scrollTo({
left: scrollStart
.left
- dx,
top: scrollStart
.top
- dy,
behavior: &#
39;auto&#
39; // 即时滚动，无动画
})
}
/**
* PDF 内容拖拽停止：清理事件和状态
*/
function onPdfMouseUp() {
isPdfDragging = false
currentScrollContainer = null // 清空当前滚动容器
// 解绑全局事件（与绑定的函数一致）
document
.removeEventListener(&#
39;mousemove&#
39;, onPdfMouseMove)
document
.removeEventListener(&#
39;mouseup&#
39;, onPdfMouseUp)
}
/*
---------------- 滚轮事件（防止冒泡影响
页面）
---------------- */
function onWhe
el(e: Whe
elEvent, tabId: string
| number) {
e
.stopPropagation() // 阻止滚轮事件冒泡到
页面
const scrollContainer = scrollRefMap
.get(tabId)
if (scrollContainer) {
// 自定义滚轮行为（横向+纵向滚动）
scrollContainer
.scrollLeft
-= e
.d
eltaX
scrollContainer
.scrollTop
-= e
.d
eltaY
e
.preventDefault() // 防止
页面整体滚动
}
}
/*
---------------- 高亮区域绘制
---------------- */
/**
* 绘制 PDF 高亮区域（支持外部调用）
* @param rect 高亮坐标（PDF 原始坐标）
* @param tabId 标签页ID（默认当前激活标签页）
*/
function drawHighlight(
rect: { x0: number; y0: number; x1: number; y1: number },
tabId?: string
| number
) {
const targetTabId = tabId ?? (
tabs
.value
.find(tab => tab
.id
.toString() === activeTab
.value)?
.id ?? &#
39;&#
39;
)
const pdfContainer = pdfContainerMap
.get(targetTabId)
const scrollContainer = scrollRefMap
.get(targetTabId)
if (!pdfContainer
|| !scrollContainer) return
// 1
. 清除旧的高亮区域
pdfContainer
.queryS
electorAll(&#
39;
.pdf
-highlight&#
39;)
.forEach(
el =>
el.remove())
// 2
. 获取 Canvas 和基础数据
const canvas = pdfContainer
.queryS
elector(&#
39;canvas&#
39;)
const baseViewport = tabBaseViewport
.get(targetTabId)
if (!canvas
|| !baseViewport) return
const currentScale = parseFloat(canvas
.dataset
.scale
|| &#
39;1&#
39;)
// 计算 PDF 原始坐标到 Canvas 渲染坐标的比例
const scaleX = canvas
.width / baseViewport
.width
const scaleY = canvas
.height / baseViewport
.height
//
3. 计算高亮区域在 Canvas 上的位置和尺寸
const highlightStyle = {
left: `${rect
.x0 * scaleX}px`,
top: `${rect
.y0 * scaleY}px`,
width: `${(rect
.x1
- rect
.x0) * scaleX}px`,
height: `${(rect
.y1
- rect
.y0) * scaleY}px`
}
// 4
. 创建高亮
元素
const highlight
El = document
.create
Element(&#
39;div&#
39;)
highlight
El.className = &#
39;pdf
-highlight&#
39;
Object
.assign(highlight
El.style, {
...highlightStyle,
position: &#
39;absolute&#
39;,
background: &#
39;rgba(0, 2
55, 0, 0
.4)&#
39;,
border: &#
39;2px dashed #ff4d4f&#
39;,
pointerEvents: &#
39;none&#
39;, // 不影响鼠标事件
zIndex: 9999 // 确保高亮在最上层
})
//
5. 添加到容器并自动滚动到高亮区域
pdfContainer
.style
.position = &#
39;r
elative&#
39;
pdfContainer
.appendChild(highlight
El)
// 等待 DOM 更新后执行滚动
nextTick(() => {
const containerWidth = scrollContainer
.clientWidth
const containerHeight = scrollContainer
.clientHeight
// 滚动到高亮区域中心
scrollContainer
.scrollTo({
left: Math
.max(0, parseFloat(highlightStyle
.left) + parseFloat(highlightStyle
.width) / 2
- containerWidth / 2),
top: Math
.max(0, parseFloat(highlightStyle
.top) + parseFloat(highlightStyle
.height) / 2
- containerHeight / 2),
behavior: &#
39;smooth&#
39; // 平滑滚动
})
})
}
/**
* 外部调用的高亮方法（适配暴露接口）
*/
function drawHighlightByCoords(rect: { x0: number; y0: number; x1: number; y1: number }) {
drawHighlight(rect)
}
/*
---------------- 监听
Props 变化
---------------- */
// 监听 visible 变化：弹窗显示/
隐藏时的处理
watch(
() =>
props.visible,
async (isVisible, oldVisible) => {
// 弹窗
隐藏时：重置缩放和中断渲染
if (!isVisible) {
tabScale
.clear()
if (abortController) {
abortController
.abort()
abortController = null
}
currentScrollContainer = null // 清空拖拽容器状态
return
}
// 弹窗从
隐藏变为显示时：居中弹窗
await nextTick()
if (oldVisible === false) {
const windowWidth = window
.innerWidth
const windowHeight = window
.innerHeight
modalStyle
.left = `${(windowWidth
- 800) / 2}px`
modalStyle
.top = `${(windowHeight
- 600) / 2}px`
}
},
{ immediate: true }
)
// 监听 highlight 变化：外部传入高亮坐标时绘制
watch(
() =>
props.highlight,
(newHighlight) => {
if (newHighlight && activeTab
.value) {
drawHighlight(newHighlight)
}
},
{ immediate: false, deep: true }
)
/*
---------------- 关闭弹窗
---------------- */
function close() {
// 中断渲染并重置状态
if (abortController) {
abortController
.abort()
abortController = null
}
currentScrollContainer = null
pdfRealSize
.value = { width: 0, height: 0 }
emit(&#
39;update:visible&#
39;, false)
}
/*
---------------- 组件卸载清理
---------------- */
onUnmounted(() => {
// 1
. 中断所有未完成的渲染
if (abortController) {
abortController
.abort()
abortController = null
}
// 2
. 解绑所有全局事件（防止内存泄漏，确保与绑定函数一致）
document
.removeEventListener(&#
39;mousemove&#
39;, onDrag)
document
.removeEventListener(&#
39;mouseup&#
39;, stopDrag)
document
.removeEventListener(&#
39;mousemove&#
39;, onPdfMouseMove)
document
.removeEventListener(&#
39;mouseup&#
39;, onPdfMouseUp)
//
3. 清空所有状态
pdfContainerMap
.clear()
scrollRefMap
.clear()
tabScale
.clear()
tabBaseViewport
.clear()
currentScrollContainer = null
})
/*
---------------- 暴露外部调用的方法
---------------- */
defineExpose({
openWithTabs, // 打开 PDF 标签页
drawHighlight: drawHighlightByCoords // 绘制高亮区域
})
</script>
<style scoped>
/* 遮罩层：全屏覆盖 */
.pdf
-mask {
position: fixed;
inset: 0;
z
-index: 9999;
pointer
-events: none; /* 仅弹窗区域可点击 */
background: rgba(0, 0, 0, 0
.3); /* 增加半透明背景，提升体验 */
}
/* 弹窗容器：可拖拽、可缩放 */
.pdf
-modal {
position: absolute;
background: #ffffff;
border: 1px solid #e4e7ed;
border
-radius: 8px;
box
-shadow: 0 8px 24px rgba(0, 0, 0, 0
.1
5);
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: 12px 16px;
background: #f
5f7fa;
cursor: grab; /* 拖拽光标 */
border
-bottom: 1px solid #e4e7ed;
user
-s
elect: none; /* 禁止文本选中 */
}
.pdf
-header:active {
cursor: grabbing; /* 拖拽中光标 */
}
.pdf
-header
.title {
font
-size: 16px;
font
-weight:
500;
color: #1f29
37;
}
.pdf
-header
.tools {
display: flex;
gap: 8px; /* 按钮间距 */
}
/* 标签页容器：占满弹窗剩余高度 */
.pdf
-tabs {
flex: 1;
display: flex;
flex
-direction: column;
overflow: hidden;
}
/* PDF 内容容器：滚动区域 */
.pdf
-body {
flex: 1;
overflow: auto;
position: r
elative; /* 为高亮区域提供定位上下文 */
}
/* PDF Canvas：禁止鼠标事件（避免影响拖拽） */
.pdf
-body canvas {
pointer
-events: none;
display: block; /* 消除 Canvas 默认空隙 */
}
/* 高亮区域样式 */
.pdf
-highlight {
box
-sizing: border
-box; /* 边框不影响尺寸计算 */
}
/* 适配
Element Plus 标签页样式（避免冲突） */
.pdf
-tabs
.el-tabs__content {
flex: 1;
overflow: hidden;
padding: 0 !
important; /* 清除默认内边距 */
}
.pdf
-tabs
.el-tab
-pane {
height: 100%;
display: flex;
flex
-direction: column;
}
</style>这个代码里面有个别是错误的，比如没有PDFLoadingTask，需要帮我重新分析下代码，功能逻辑，把错误的更新掉，并给我重新生成代码
本文档详细介绍了在Vue3中如何封装Element Plus的el-form-item组件，包括处理v-model、props和emit的交互，以及在不同类型的表单元素（如el-input、el-checkbox-group、el-radio-group）中的应用。同时，文中还提到了因Element Plus更新导致的路径变更问题和Vetur在导入路径识别上的错误，以及相应的解决方案。
最低0.47元/天 解锁文章
扫一扫
1124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
