vue预览pdf，放大缩小拖动，dialog拖动，父页面滚动资源-CSDN下载

共6个文件

js：4个

vue：2个

148 浏览量 2023-12-09 19:34:01 上传评论收藏 7KB ZIP 举报

在Vue.js开发中，预览PDF文件是一项常见的需求，它涉及到前端处理静态文档的能力，以及交互体验的优化。本文将详细讲解如何在Vue项目中实现PDF预览、放大缩小、拖动以及对话框（Dialog）的拖动功能，并讨论如何处理父页面的滚动。让我们了解Vue.js。Vue.js是一个轻量级的前端JavaScript框架，以其易学易用、组件化开发的特点深受开发者喜爱。在Vue项目中，我们通常通过创建组件来实现特定的功能，如预览PDF。预览PDF：为了在Vue中预览PDF，我们可以使用`ElianPdf`库。这是一个基于`pdf.js`的 Vue 组件，它允许我们在Web页面上显示PDF文件。需要安装`ElianPdf`，在终端执行以下命令： ```bash npm install --save elian-pdf ``` 接着，在Vue组件中引入并使用： ```html <template> <div> <elian-pdf :src="pdfUrl" /> </div> </template> <script> import ElianPdf from 'elian-pdf'; export default { components: { ElianPdf, }, data() { return { pdfUrl: 'path/to/your/pdf', }; }, }; </script> ``` 放大缩小：`ElianPdf`通常已经支持PDF的缩放操作，用户可以通过鼠标滚轮或触控板进行放大和缩小。如果默认行为不满足需求，可以查阅其文档，了解如何自定义缩放逻辑。拖动：在Vue中，我们可以利用`DraggableElement.vue`这样的组件实现元素的拖动。`DraggableElement`通常会监听鼠标事件，计算移动距离，并更新元素的位置。这个组件可能包含以下关键代码： ```html <template> <div ref="element" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag">  </div> </template> <script> export default { data() { return { startX: 0, startY: 0, x: 0, y: 0, }; }, methods: { startDrag(event) { this.startX = event.clientX; this.startY = event.clientY; document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDrag); }, drag(event) { this.x = event.clientX - this.startX; this.y = event.clientY - this.startY; this.$refs.element.style.transform = `translate(${this.x}px, ${this.y}px)`; }, stopDrag() { document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDrag); }, }, }; </script> ``` 对话框（Dialog）拖动：对于Vue中的Dialog组件，如`element-ui`或`vuetify`等，它们通常提供开箱即用的拖动功能。如果没有，我们可以使用上面的`DraggableElement.vue`进行改造，将其应用于Dialog组件。例如，将Dialog的头部包裹在`DraggableElement`中，使得用户可以拖动头部来移动整个Dialog。父页面滚动：在预览PDF或使用Dialog时，有时需要阻止父页面的滚动。这可以通过监听滚动事件并在事件处理函数中阻止默认行为来实现： ```js window.addEventListener('scroll', (event) => { event.preventDefault(); window.scrollTo(0, 0); }, { passive: false }); ``` 记得在PDF预览关闭或Dialog隐藏时移除该监听器，以恢复正常的页面滚动。 Vue.js结合适当的第三方库和自定义组件，能够很好地实现PDF预览、元素拖动以及滚动控制等功能，为用户提供流畅的交互体验。在实际开发中，根据具体需求，可能还需要考虑性能优化、错误处理和兼容性问题，确保应用在各种场景下都能稳定运行。

资源推荐

资源详情

资源评论

收起资源包目录

PDF组件.zip （6个子文件）

drag

drag.js 5KB

index.js 536B

ElianPdf

CMapReaderFactory.js 655B

index.vue 9KB

buffer-loader.js 260B

DraggableElement.vue 1KB

export function startDrag(header, dialog, callback) { var params = { top: 0, left: 0, currentX: 0, currentY: 0, flag: false, cWidth: 0, cHeight: 0, tWidth: 0, tHeight: 0 }; //弹框可拉伸最小宽高 let minWidth = 400; let minHeight = 300; //初始非全屏 let isFullScreen = false; //当前宽高 let nowWidth = 625; let nowHight = 884; //当前顶部高度 let nowMarginTop = 0; // 给拖动块添加样式 header.style.cursor = 'move'; header.onmousedown = function (event) { // 按下时初始化params var e = event ? event : window.event; params = { top: dialog.offsetTop, left: dialog.offsetLeft, currentX: e.clientX, currentY: e.clientY, flag: true, cWidth: document.body.clientWidth, cHeight: document.body.clientHeight, tWidth: dialog.offsetWidth, tHeight: dialog.offsetHeight }; // 给被拖动块初始化样式 dialog.style.margin = 0; dialog.style.top = params.top + 'px'; dialog.style.left = params.left + 'px'; if (!event) { // 防止IE文字选中 header.onselectstart = function () { return false; } } document.onmousemove = function (event) { // 防止文字选中 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var e = event ? event : window.event; if (params.flag) { var nowX = e.clientX; var nowY = e.clientY; // 差异距离 var disX = nowX - params.currentX; var disY = nowY - params.currentY; // 最终移动位置 var zLeft = 0; var zTop = 0; zLeft = parseInt(params.left) + disX; // 限制X轴范围 if (zLeft <= -parseInt(params.tWidth / 2)) { zLeft = -parseInt(params.tWidth / 2); } if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) { zLeft = params.cWidth - parseInt(params.tWidth * 0.5); } zTop = parseInt(params.top) + disY; // 限制Y轴范围 if (zTop <= 0) { zTop = 0; } if (zTop >= params.cHeight - parseInt(params.tHeight * 0.5)) { zTop = params.cHeight - parseInt(params.tHeight * 0.5); } // 执行移动 dialog.style.left = zLeft + 'px'; dialog.style.top = zTop + 'px'; } if (typeof callback == "function") { callback(zLeft, zTop); } } document.onmouseup = function () { params.flag = false; document.onmousemove = null; document.onmouseup = null; }; }; header.ondblclick = (e) => { if (isFullScreen == false) { nowHight = dialog.clientHeight; nowWidth = dialog.clientWidth; nowMarginTop = dialog.style.marginTop; dialog.style.left = 0; dialog.style.top = 0; dialog.style.height = "100VH"; dialog.style.width = "100VW"; dialog.style.marginTop = 0; isFullScreen = true; dialogHeaderEl.style.cursor = 'initial'; dialogHeaderEl.onmousedown = null; } else { dialog.style.height = "auto"; dialog.style.width = nowWidth + 'px'; dialog.style.marginTop = nowMarginTop; isFullScreen = false; dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.onmousedown = moveDown; } } //拉伸(右下方)效果不想要可以注释 let resizeEl = document.createElement("div"); let drag = dialog.childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0]; dialog.appendChild(resizeEl); //在弹窗右下角加上一个10-10px的控制块 resizeEl.style.cursor = 'w-resize'; resizeEl.style.backgroundColor = 'rgb(235, 181, 99)'; resizeEl.style.position = 'absolute'; resizeEl.style.height = '100%'; resizeEl.style.width = '10px'; resizeEl.style.right = '0px'; resizeEl.style.bottom = '0px'; resizeEl.style.zIndex = '99'; //鼠标拉伸弹窗 resizeEl.onmousedown = (e) => { // 记录初始x位置 let clientX = e.clientX; // 鼠标按下，计算当前元素距离可视区的距离 let disX = e.clientX - resizeEl.offsetLeft; let disY = e.clientY - resizeEl.offsetTop; document.onmousemove = function (e) { e.preventDefault(); // 移动时禁用默认事件 // 通过事件委托，计算移动的距离 let x = e.clientX - disX + (e.clientX - clientX);//这里由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍 //let y = e.clientY - disY; //比较是否小于最小宽高 dialog.style.width = x > minWidth ? `${x}px` : minWidth + 'px'; //dialog.style.height = y > minHeight ? `${y}px` : minHeight + 'px'; drag.style.width = x > minWidth ? `${x}px` : minWidth + 'px'; //drag.style.height = y > minHeight ? `${y}px` : minHeight + 'px'; }; //拉伸结束 document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } }

评论收藏

内容反馈