基于vue实现图片预览功能，写出实现代码

A：

在模板中使用v-for指令，循环展示图片列表，并针对每张图片绑定事件，当用户点击图片时，调用showPreview方法展示预览窗口。

<template>
  <div>
    <div v-for="(img, index) in imageList" :key="index">
      <img :src="img.src" @click="showPreview(index)" />
    </div>
    <div v-show="showPreviewFlag" class="preview-container">
      <img :src="previewImage" />
      <span class="close-btn" @click="closePreview">×</span>
    </div>
  </div>
</template>

在脚本中定义data中的数据和方法，如图片列表、预览窗口显示标志、预览图片地址等，并实现showPreview和closePreview方法。

<script>
export default {
  data() {
    return {
      imageList: [
        { src: 'https://example.com/img/1.jpg' },
        { src: 'https://example.com/img/2.jpg' },
        { src: 'https://example.com/img/3.jpg' }
      ],
      showPreviewFlag: false,
      previewImage: ''
    }
  },
  methods: {
    showPreview(index) {
      this.previewImage = this.imageList[index].src
      this.showPreviewFlag = true
    },
    closePreview() {
      this.showPreviewFlag = false
    }
  }
}
</script>

通过CSS样式设置预览窗口的样式，如定位、宽高、边框、背景等。

<style>
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-container img {
  max-width: 80%;
  max-height: 80%;
  border: 5px solid white;
  border-radius: 10px;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}
</style>