实现vue 点击图片的局部，显示文字提示

1. 在 `img` 标签中添加 `@click` 事件绑定方法
2. 在该方法中设置一个变量（例如 `showTip`）为 `true`
3. 在页面中添加一个 `div` 元素作为提示框，使用 `v-if` 控制其显示与隐藏
4. 在该 `div` 元素中添加需要显示的文字
5. 使用 `v-show` 控制提示框的位置和样式，可以使用绝对定位和 `transform` 属性实现在图片上的定位
6. 在 `img` 标签中添加 `@mouseleave` 事件绑定方法，在该方法中将 `showTip` 变量设置为 `false`，隐藏提示框

示例代码：

<template>
  <div>
    <img src="xxx.jpg" @click="showTip = true" @mouseleave="showTip = false">
    <div class="tip" v-if="showTip" v-show="showTip">提示文字</div>
  </div>
</template>

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

<style>
.tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>