在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.鼠标事件

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

methods里面的代码

// 信息显示层

dataDetails (e, data) {

  this.floatData = data

  this.floatLeft = e.clientX - 195 + 'px' // 减去外层div的left距离

  this.floatTop = e.clientY - 55 + 'px'

  this.isShow = 'inline-block'

},

巴特西

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

最新文章

热门文章