以下代码如何使鼠标进入不同的盒子使状态栏显示不同的数据 template div mousemove=updateMousePosition div id=map-containerdiv div v-if=showNewBoxFlag class=status-bar style= left $mouseXpx top $mouseYpx

要使鼠标进入不同的盒子时显示不同的数据，可以通过以下步骤实现：

1. 在data中添加一个属性，用于保存当前鼠标所在的盒子的数据，例如currentBoxData。

data() {
  return {
    showNewBoxFlag: false,
    mouseX: 0,
    mouseY: 0,
    currentBoxData: null
  };
},

2. 在盒子的mouseenter事件中，更新currentBoxData为当前盒子的数据。

markerEl.addEventListener('mouseenter', () => {
  this.showNewBoxFlag = true;
  this.currentBoxData = boxData; // 替换boxData为当前盒子的数据
});

3. 在盒子的mouseleave事件中，将currentBoxData重置为null。

markerEl.addEventListener('mouseleave', () => {
  this.showNewBoxFlag = false;
  this.currentBoxData = null;
});

4. 修改状态栏的内容为currentBoxData的数据。

<div
  v-if="showNewBoxFlag && currentBoxData"
  class="status-bar"
  :style="{ left: `${mouseX}px`, top: `${mouseY}px` }"
>
  {{ currentBoxData }}
</div>

这样，当鼠标进入不同的盒子时，状态栏会显示对应的数据。你可以根据实际情况替换currentBoxData为盒子的数据。