在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-27 05:43:13

    Laravel 门面自动补全工具 laravel-ide-helper

    当我们在 PhpStorm 编辑器中，开发 Laravel 框架的项目时，很多类方法都不能自动补全和定位，比如 Facade 门面的方法，DB::table()、Route::get() 等。

  • 2019-08-28 08:28:36

    Js apply,call方法详解,及其apply()方法的妙用

    在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

  • 2019-08-28 08:49:47

    Nginx + fastcgi + php 的原理与关系

    CGI对每个请求会parse一遍对应脚本的配置文件（如php.ini）， 加载配置和扩展，初始化执行环境，性能非常差，所有有了下面的流程：

  • 2019-08-28 09:23:15

    php单例模式

    单例模式，是一种常见的软件设计模式。在应用这个模式时，单例对象的类必须保证只有一个实例存在。

  • 2019-08-28 22:45:02

    彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系

    Gradle是个构建系统，能够简化你的编译、打包、测试过程。熟悉Java的同学，可以把Gradle类比成Maven。Gradle Wrapper的作用是简化Gradle本身的安装、部署。不同版本的项目可能需要不同版本的Gradle，手工部署的话比较麻烦，而且可能产生冲突，所以需要Gradle Wrapper帮你搞定这些事情。Gradle Wrapper是Gradle项目的一部分。