前端有两个盒子 hover盒子A 除了这个盒子以外的其他地方覆盖遮罩层，鼠标离开盒子A遮罩层消失 鼠标hover盒子B同样可以像盒子A一样触发遮罩层 请用vue2举个例子

这是一个使用Vue2实现的示例代码，包含了两个盒子hover效果和遮罩层功能：

<template>
  <div class="wrapper" @mousemove="onMouseMove">
    <div class="box" @mouseover="showOverlay('A')" @mouseleave="hideOverlay('A')">
      Box A
      <div class="overlay" :class="{active: activeOverlay === 'A'}"></div>
    </div>
    <div class="box" @mouseover="showOverlay('B')" @mouseleave="hideOverlay('B')">
      Box B
      <div class="overlay" :class="{active: activeOverlay === 'B'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mouseX: 0,
      mouseY: 0,
      activeOverlay: null,
    };
  },
  methods: {
    onMouseMove(event) {
      this.mouseX = event.clientX;
      this.mouseY = event.clientY;
    },
    showOverlay(box) {
      this.activeOverlay = box;
    },
    hideOverlay(box) {
      this.activeOverlay = null;
    },
  },
};
</script>

<style>
/* 以下样式仅作为示例，可根据实际需求进行修改 */
.wrapper {
  position: relative;
  width: 400px;
  height: 300px;
}
.box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.overlay.active {
  opacity: 1;
}
</style>

说明：

1. 在`<template>`中定义了两个盒子，分别是`Box A`和`Box B`。
2. `Box A`和`Box B`都绑定了`mouseover`和`mouseleave`事件，分别用来显示和隐藏遮罩层。
3. 遮罩层的显示和隐藏通过绑定`class`实现，当`activeOverlay`的值为`A`或`B`时，对应的遮罩层会显示出来。
4. `mousemove`事件绑定在包裹盒子的`<div>`上，用来监听鼠标在整个区域内的移动。
5. 样式设置了盒子的大小和位置以及遮罩层的样式，仅供参考，实际使用需根据需求进行调整。