vue+pdf.js 印章签署完后鼠标滑过显示签章信息

效果图

核心思想：

pdf.js签署印章，搜索相关文档就好

签署完后，每一页可能有多个印章，将这些印章跟随鼠标移动显示印章信息

首先思考将这些印章的提示信息放在生成的div中，然后添加鼠标移动事件，根据页数和鼠标移动的坐标判断是否经过了某一页的印章

核心代码

if(this.sginData!=null){
for(var key in this.sginData){console.log('kye====', key)for(var i=0 ; i < this.sginData[key].length; i++){var divE = document.createElement('div') //创建divvar divId = document.createAttribute("id") //创建属性var divIdClass = document.createAttribute("class") //创建属性divId.value = 'mouse'+this.sginData[key][i].page+[i] //设置属性值divIdClass.value = 'normal2'divE.setAttributeNode(divId) //给div添加属性divE.setAttributeNode(divIdClass) //给div添加属性let ele = document.getElementById((this.sginData[key][i].page+1).toString())if (ele) ele.appendChild(divE)// document.getElementById((sginData[key][key].page+1).toString()).appendChild(divE)divE.style='background-color:#666;border:1px solid #666;position: absolute;\n' +'    opacity: 0.9;\n' +'    color: white;\n' +'    border-radius: 5px;\n' +'    padding: 20px;\n' +'    overflow: hidden;\n' +'    display: none;\n' +'    z-index: 99;\n' +'    background-color: #666;\n' +'    border: 1px solid #f7f7f7;'var html ='<div style="background-color:red;text-align:center"></div><div style="text-align: left"><span style="font-weight: bold">签章人</span>:'+this.sginData[key][i].userName+'</br><span style="font-weight: bold">签章名称:</span>'+this.sginData[key][i].sealName+'</br><span style="font-weight: bold">签章日期:</span>'+this.sginData[key][i].signedTime+'</div>'divE.innerHTML = html}

鼠标移动事件

changeActive($event,page){console.log('移入X:'+$event.offsetX+"Y:"+$event.offsetY)// var showDiv = document.getElementById('mouse')//遍历签章信息var sginData2 ={"0": [{"id": "402883c273e5aa5b0173e5adb6b30001","taskId": "ff80818173e58df10173e5adb3ca000a","sealId": "4028832470e1725d0170e1c0817a0004","sealName": "测试印章1","userName": "刘革1","signedTime": "2020-08-13 10:37:13","createTime": "2020-08-13 10:37:13","createMilliSecond": 1597286233774,"page": 0,"x": 263,"y": 190,"width": 127.559,"height": 127.559,"pageWidth": 595.32,"pageHeight": 841.92,"widthScale": 0.21427,"heightScale": 0.15151,"xscale": 0.441779,"yscale": 0.225675},{"id": "402883c273e5aa5b0173e5aef36e0005","taskId": "ff80818173e58df10173e5adb3ca000a","sealId": "4028832470e1725d0170e1c0817a0004","sealName": "测试印章2","userName": "刘革2","signedTime": "2020-08-13 10:38:34","createTime": "2020-08-13 10:38:34","createMilliSecond": 1597286314860,"page": 0,"x": 363,"y": 476,"width": 127.559,"height": 127.559,"pageWidth": 595.32,"pageHeight": 841.92,"widthScale": 0.21427,"heightScale": 0.15151,"xscale": 0.609756,"yscale": 0.327822}],"1": [{"id": "402883c273e5aa5b0173e5b0526f0009","taskId": "ff80818173e58df10173e5adb3ca000a","sealId": "4028832470e1725d0170e1c0817a0004","sealName": "测试印章3","userName": "刘革3","signedTime": "2020-08-13 10:40:04","createTime": "2020-08-13 10:40:04","createMilliSecond": 1597286404716,"page": 1,"x": 263,"y": 190,"width": 127.559,"height": 127.559,"pageWidth": 595.32,"pageHeight": 841.92,"widthScale": 0.21427,"heightScale": 0.15151,"xscale": 0.450178,"yscale": 0.281499}]}// for(let i = 0 ; i < sginData.length; i ++){//拿到印章信息进行遍历显示for(var key in this.sginData){for(var i = 0 ; i < this.sginData[key].length ; i ++){if(page == this.sginData[key][i].page+1){var showDiv = document.getElementById('mouse'+(page-1).toString()+(i).toString())// this.sginData[key][i].width = 200if($event.offsetX < (this.sginData[key][i].x * this.scale +(this.sginData[key][i].width )) && $event.offsetX > this.sginData[key][i].x && $event.offsetY < (this.sginData[key][i].y * this.scale+(this.sginData[key][i].width )) && $event.offsetY > this.sginData[key][i].y ){console.log('移入X:'+$event.offsetX+"Y:"+$event.offsetY)if(showDiv)showDiv.style.left = $event.offsetX+30+'px'//($event.pageX-150) + 'px'showDiv.style.top = $event.offsetY-40+'px'//($event.pageY-80) + 'px'showDiv.style.display = 'block'}else{if(showDiv) showDiv.style.display = 'none'}}}}

数据驱动视图思想，进行代码优化

1、子组件中利用v-show回显签章信息

2、从父组件中拿签章的位置信息 X 和Y

父组件

3、通过flag进行回显将数据传给子组件

vue+pdf.js 印章签署完后鼠标滑过显示签章信息相关推荐

html5鼠标滑过边框内外发亮,JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: JS鼠标滑过显示边框菜单 .menulines{ border:1px solid white; } .menuli ...
css实现鼠标禁用（鼠标滑过显示红色禁止符号）
css实现鼠标禁用(鼠标滑过显示红色禁止符号) 创作背景 css鼠标禁用创作背景从本文开始,将会用三篇文章来一步一步实现 vue+antd+ts实战后台管理系统中table表格的不可控操作.中间会 ...
jquery鼠标移入文字提示_jquery实现鼠标滑过显示提示框的方法
本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加 jquery.js.按钮 ...
echarts 柱状图鼠标滑过显示图标+数字每三位打千分号+单位
echarts 柱状图鼠标悬浮显示图标+数字每三位打千分号+单位千分号+单位全部代码示例代码柱状图鼠标滑过显示单位千分号+单位 1.图标:params[i].marker 2.数字每三位 ...
鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法
1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示 <div class="date7"> <a href=""><di ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
vue 鼠标滑过显示文字增加高度
需求:文字内容太长,要求鼠标滑过展示全部内容,并且高度变高鼠标放上效果代码: 前端: <li id="a" v-for="item,index in menuD ...
鼠标滑过显示图片大图效果
描写叙述: 当用户将鼠标放到图片上时.显示图片的大图. 效果图: 说明: 用到了mouseover.mouseout.mousemove三个事件.分别表示鼠标滑过图片.鼠标移除图片.鼠标在图片上移动 ...
Vue父组件mounted执行完后再执行子组件mounted执行顺序问题
文章目录一.vue加载顺序? 二.父组件和子组件 1.封装ip地址框 2.前端从数据库取数据并且赋值 bug 解决方案一.vue加载顺序? 父组件 created 子组件 created 子组件 ...

vue+pdf.js 印章签署完后鼠标滑过显示签章信息

vue+pdf.js 印章签署完后鼠标滑过显示签章信息相关推荐

最新文章

热门文章