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