vue实现弹照片

Vue 实现图片弹窗功能

使用 Vue 实现图片弹窗功能可以通过组件化方式完成，结合遮罩层、过渡动画等提升用户体验。以下是两种常见实现方式：

基础弹窗实现

创建一个可复用的图片弹窗组件（ImageModal.vue），通过 v-if 或 v-show 控制显示状态：

<template>
  <div class="modal-mask" v-show="show" @click.self="close">
    <div class="modal-container">
      <img :src="imageUrl" alt="Preview" class="modal-image" />
      <button @click="close" class="close-button">×</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
    imageUrl: String
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.modal-image {
  max-height: 80vh;
  max-width: 80vw;
  display: block;
}
.close-button {
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 24px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}
</style>

使用第三方库

对于更复杂的需求（如画廊、缩放等），推荐使用专门库：

1. vue-easy-lightbox
   安装：npm install vue-easy-lightbox
   示例：

   <template>
     <div>
       <img 
         v-for="(img, index) in imgs" 
         :key="index" 
         :src="img" 
         @click="showImg(index)"
       >
       <vue-easy-lightbox
         :visible="visible"
         :imgs="imgs"
         :index="index"
         @hide="handleHide"
       />
     </div>
   </template>
   
   <script>
   import VueEasyLightbox from 'vue-easy-lightbox'
   export default {
     components: { VueEasyLightbox },
     data() {
       return {
         imgs: ['image1.jpg', 'image2.jpg'],
         visible: false,
         index: 0
       }
     },
     methods: {
       showImg(index) {
         this.index = index
         this.visible = true
       },
       handleHide() {
         this.visible = false
       }
     }
   }
   </script>

2. viewerjs
   结合 v-viewer 指令实现：
   安装：npm install v-viewer
   配置：

   

   import Viewer from 'v-viewer'
   import 'viewerjs/dist/viewer.css'
   Vue.use(Viewer)

   使用：

   <template>
     <div v-viewer>
       <img v-for="src in images" :key="src" :src="src">
     </div>
   </template>

动画优化

为弹窗添加过渡效果：

<transition name="fade">
  <ImageModal v-if="showModal" :imageUrl="selectedImage" @close="showModal = false"/>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

父组件调用示例

<template>
  <div>
    <img 
      v-for="(img, i) in gallery" 
      :key="i" 
      :src="img.thumbnail" 
      @click="openModal(img.fullSize)"
    >
    <ImageModal 
      :show="isModalOpen" 
      :imageUrl="currentImage" 
      @close="isModalOpen = false"
    />
  </div>
</template>

<script>
import ImageModal from './ImageModal.vue'
export default {
  components: { ImageModal },
  data() {
    return {
      gallery: [
        { thumbnail: 'thumb1.jpg', fullSize: 'full1.jpg' },
        { thumbnail: 'thumb2.jpg', fullSize: 'full2.jpg' }
      ],
      isModalOpen: false,
      currentImage: ''
    }
  },
  methods: {
    openModal(imgUrl) {
      this.currentImage = imgUrl
      this.isModalOpen = true
    }
  }
}
</script>