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

下面是一个示例代码，包括HTML，CSS和Vue.js组件。

HTML部分：

<div id="app">
  <div class="image-container">
    <img src="https://picsum.photos/800/600" alt="大图片">
    <div class="mask" v-for="(mask, index) in masks" :key="index" :style="{top: mask.top, left: mask.left}" @click="showText(index)">
      <span class="mask-text">{{ mask.text }}</span>
    </div>
  </div>
  <div class="text-container">
    <p v-if="selectedMask !== null">{{ masks[selectedMask].text }}</p>
  </div>
</div>

CSS部分：

.image-container {
  position: relative;
}

.mask {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.mask-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-container {
  margin-top: 20px;
}

Vue.js组件部分：

new Vue({
  el: '#app',
  data: {
    masks: [
      { top: '100px', left: '100px', text: '小局部1' },
      { top: '200px', left: '300px', text: '小局部2' },
      { top: '400px', left: '500px', text: '小局部3' }
    ],
    selectedMask: null
  },
  methods: {
    showText(index) {
      this.selectedMask = index
    }
  }
})

解释：

1. `image-container`是一个相对定位的容器，用于包含大图片和遮罩层。
2. `mask`是绝对定位的遮罩层，它的位置由`top`和`left`属性控制，遮罩层被点击时会触发`showText`方法。
3. `mask-text`是遮罩层内的文字，它被垂直和水平居中对齐。
4. `text-container`用于显示被选中的遮罩层对应的文字。
5. 在Vue实例中，`masks`数组包含3个遮罩层的位置和文字信息，`selectedMask`用于记录当前选中的遮罩层的索引。`showText`方法将`selectedMask`更新为被点击的遮罩层的索引。`v-if`指令用于只在有选中的遮罩层时显示文字。