在vue中写一个跟着鼠标跑的div，div里面动态显示数据

2020-03-22 21:17:56

参考地址 在vue中写一个跟着鼠标跑的div，div里面动态显示数据

1.div应该放在body里面，这是我放在body中的一个div里面的div


<!-- 信息查看层 -->
<div class="floatDiv" :style="{display: isShow,left: floatLeft,top: floatTop}">
  <p>{{floatData.name}}</p>
  <p>{{level(floatData.level)}}</p>
  <p>{{floatData.intersectionStartRing}}环~{{floatData.intersectionEndRing}}环</p>
  <p v-if='floatData.estimatedStartTime'>{{floatData.estimatedViewStartTime}}-{{floatData.estimatedViewEndTime}}</p>
</div>

2.效果图：移动到红色剑头的区域显示对应的消息 

3.鼠标事件

1
<div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave="hiddenDetail($event)" v-for="(item, index) in sectionDiagram" <br>:style="{left: item.sqrareLeft + 'px', width: item.width + 'px',zIndex: 88 + index}" :key='index' class="middleBoxBgmSquare" <br>:class="square(item.passState)"><br></div>

methods里面的代码

1
2
3
4
5
6
7
// 信息显示层
dataDetails (e, data) {
  this.floatData = data
  this.floatLeft = e.clientX - 195 + 'px' // 减去外层div的left距离
  this.floatTop = e.clientY - 55 + 'px'
  this.isShow = 'inline-block'
},


  • 精彩推荐

  • 2020-03-16 16:52:05

    对icomoon的误解，以及最快速的使用

    此时需要注意顶部第一个选项，Quick Usage，一定要打开，Enable Quick Usage，谁让咱英语不好呢，这个时候会出现一个css连接，直接引用就好了，就可以随意使用图标了，引入这一个css就能实现我们的功能，省区引入太多文件的烦恼，你可以在浏览器打开这个css，可以看到里面把我们所用的文件整成base64了。所以挺好用的。

  • 2020-03-17 09:47:05

    video标签视频不自动播放的问题

    添加 muted 属性，就可以通过地址栏进入网页的时候自动播放了，手机端还是有的有限制的，比如iphone浏览器，就不行，苹果手机为了保护用户的流量和用户的意愿，是禁止自动播放的，必须有手动触发。

  • 2020-03-17 14:21:31

    nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss（精华）

    部署nuxtjs，这一篇文章就够了，pm2 代码自动发布依赖于 git 工具，先将 ssh 密钥配置再你的代码仓库（github 或者 gitLab），具体操作自行 google 或者点击github 配置 ssh。 使用 ssh 密钥链接服务器 s $ ssh-copy-id root@1.2.3.4 # 把本机的 SSH 秘钥添加至服务器，配置成功后，以后就不需要再执行这条 SSH 命令了

  • 2020-03-18 21:15:34

    使用canvas画布解决百度地图自定义图层全球连续显示问题

        基于百度地图的Web API进行自定义图层叠加时，默认的图层只能叠加到全球范围以内，即经度范围为[-180, 180]，而无法将图层叠加到默认的全球范围以外，即经度范围超出了[-180, 180]之后，经纬度坐标会自动回归到(0, 0)，而导致在地图拖拽时全球以外无法连续显示想要的图层，此时可以基于百度地图的自定义图层将经纬度坐标转为像素点使用画布canvas来解决该问题。解决后效果如下图所示： ———————————————— 版权声明：本文为CSDN博主「宏伟杰作」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011284073/article/details/80549950

  • 2020-03-18 21:18:01

    node-canvas实现百度地图个性化底图绘制

    随着nodejs的推出，node的并发和异步的强大能力，越来越多的得到应用，而且取得了非常不错的效果。 作为一个前端工程师对node.js自然有着一份更深的感情，跃跃欲试的心情，总希望能将它应用到产品中来。

  • 2020-03-18 21:19:28

    高德地图和canvas画图结合应用的一些感想(一)

    入了团队才发现，该项目前后端分离，后端工程师已就位主要实现接口，IOS端工程师也已就位，还差一个web前端工程师。背脊一凉，我之前虽然写过一些js和css，虽有点功底但是离前端工程师还是有距离的啊。在和朋友说明情况后，朋友也是胆大，让我试试，主要他实在找不到人了（也有可能目前前端工程师报价都太贵了，创业嘛，能节约就节约，能理解。。。），没办法，走一步算一步吧。