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

可以使用Vue2的v-if和v-on指令来实现该效果。具体实现步骤如下：

1. 在Vue实例中，设置一个变量showMask，用来控制遮罩层的显示和隐藏。

2. 在模板中，使用v-if指令控制遮罩层的显示和隐藏。当showMask为true时，显示遮罩层。

3. 在模板中，给盒子A和盒子B分别添加一个鼠标移入事件和移出事件。当鼠标移入盒子A或盒子B时，将showMask设置为true，显示遮罩层；当鼠标移出盒子A或盒子B时，将showMask设置为false，隐藏遮罩层。

下面是一个实现该效果的Vue组件示例代码：

<template>
  <div>
    <div class="box" @mouseover="showMask = true" @mouseout="showMask = false">
      盒子A
    </div>
    <div class="box" @mouseover="showMask = true" @mouseout="showMask = false">
      盒子B
    </div>
    <div class="mask" v-if="showMask"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMask: false
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 20px;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
</style>

当鼠标移入盒子A或盒子B时，都会触发showMask变量的改变，从而显示遮罩层；当鼠标移出盒子A或盒子B时，都会触发showMask变量的改变，从而隐藏遮罩层。通过v-if指令实现遮罩层的显示和隐藏。