在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'
},


  • 精彩推荐

  • 2019-08-19 15:50:17

    记录PHP的进程和线程理解

    线程是进程的一个执行流，线程不能分配系统资源，它是进程的一部分，比进程更小的独立运行的单位。 解释一下：进程有两个特性：一是资源的所有权，一个是调度执行（指令集），线程是调度执行中的一部分，是指进程执行过程的路径，也叫程序执行流。线程有时候也叫轻量级进程。

  • 2019-08-20 08:51:52

    一台Linux服务器可以负载多少个连接？

    我们在压测一台目标服务器，想看下负载的连接数，当我们压到一定数量的时候，控制台突然报"too many open files"，这是因为linux系统创建一个TCP连接的时候，都会创建一个socket句柄，每个socket句柄就是一个文件句柄。

  • 2019-08-20 08:56:42

    Linux下Http高并发参数优化之TCP参数

    Linux 内核参数考虑的是最通用场景，并不符合用于支持高并发访问的Web服务器的定义，所以需要修改Linux内核参数。其次，对 Nginx 的一些参数，也需要根据服务情况进行调整。

  • 2019-08-20 11:05:30

    php，nginx,线程和进程分析

    大多数的 Linux 程序都倾向于使用进程而不是线程，因为 Linux 下相对来说创建进程的开销比较小，而 Linux 的线程功能又不是很强大。

  • 2019-08-20 11:22:36

    Node.js 单线程与多进程比较

    进过上面两种方式的对比，结果很明显，多进程处理速度是单线程处理速度的 4 倍多。而且有条件的情况下，如果电脑 CPU 足够，进程数更多，那么速度也会更快。

  • 2019-08-22 13:35:27

    Generator函数的语法

    执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了是状态机还是一个遍历器对象生成函数。 返回遍历器对象，可以依次遍历Generator函数内部的每一个状态。

  • 2019-08-22 16:38:15

    理解JS原型对象与原型链(重要清晰)

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象对应拥有一个原型，对象以其原型为模板、从原型继承方法和属性。而同时原型也是对象，它也拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。