vue：一张大图片里面覆盖了3个小局部遮罩层，点击遮罩层图片下方显示对应的文字。（附上实例）

实现思路：

1. 使用Vue的data属性存储图片和遮罩层的信息，使用v-for指令循环渲染每个遮罩层和对应的文字。

2. 给每个遮罩层绑定点击事件，在事件处理函数中设置对应文字的显示状态。

3. 使用CSS对遮罩层和文字进行样式设置，实现覆盖效果。

代码如下：

HTML部分：

<div id="app">
  <img src="./img/big.jpg" alt="" class="big-img">
  <div class="mask" v-for="(item,index) in masks" :key="index" :style="{left:item.left,top:item.top}" @click="showText(index)">
    <div class="text" v-show="item.show">{{item.text}}</div>
  </div>
</div>

Vue部分：

new Vue({
  el: "#app",
  data: {
    masks: [
      { left: "30%", top: "20%", text: "这是第一个局部", show: false },
      { left: "50%", top: "60%", text: "这是第二个局部", show: false },
      { left: "20%", top: "70%", text: "这是第三个局部", show: false }
    ]
  },
  methods: {
    showText(index) {
      this.masks[index].show = !this.masks[index].show;
    }
  }
});

CSS部分：

.big-img {
  width: 100%;
}

.mask {
  position: absolute;
  width: 30%;
  height: 15%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.mask:nth-child(1) {
  left: 30%;
  top: 20%;
}

.mask:nth-child(2) {
  left: 50%;
  top: 60%;
}

.mask:nth-child(3) {
  left: 20%;
  top: 70%;
}