vue点击图片放大超出时隐藏

你可以使用Vue.js来实现点击图片放大并且在超出时隐藏的效果。具体实现方法如下：

1. 在Vue的`data`选项中添加一个`showImage`属性，用于表示当前是否需要显示放大的图片，初始值为`false`。

data() {
  return {
    showImage: false
  }
}

2. 在模板中，使用`v-if`指令来根据`showImage`属性的值来显示或隐藏放大的图片。同时，使用`v-on`指令来监听图片的点击事件，并在点击时将`showImage`属性的值设置为`true`。

<template>
  <div>
    <img src="..." v-on:click="showImage = true">
    <div class="overlay" v-if="showImage" v-on:click="showImage = false">
      <img src="..." class="enlarged-image">
    </div>
  </div>
</template>

3. 在CSS中，使用绝对定位和`z-index`属性来将放大的图片覆盖在原始图片上，并使用`opacity`属性来设置遮罩层的透明度。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.enlarged-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  z-index: 2;
}

.overlay.hidden {
  display: none;
}

在上面的代码中，我们使用`position: fixed`将遮罩层固定在页面上，使用`z-index`属性将放大的图片覆盖在遮罩层上，并使用`opacity`属性设置遮罩层的透明度。同时，我们使用`transform: translate(-50%, -50%)`将放大的图片居中显示，使用`max-width`和`max-height`属性来限制图片的最大宽度和高度。最后，我们使用`.hidden`类来在超出时隐藏遮罩层和放大的图片。

这样，当用户点击图片时，就会显示放大的图片，并在超出时自动隐藏。