当前位置：首页 > VUE

vue 实现预览图片

2026-02-17 14:05:04VUE

Vue 实现图片预览功能

使用原生 HTML5 和 CSS 实现

创建一个模态框组件用于显示放大的图片。通过 v-if 或 v-show 控制模态框的显示隐藏，点击图片时触发预览。

<template>
  <div>
    <img 
      v-for="(img, index) in images" 
      :key="index" 
      :src="img" 
      @click="openModal(img)"
      class="thumbnail"
    >

    <div v-if="showModal" class="modal" @click="closeModal">
      <img :src="selectedImage" class="modal-content">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      showModal: false,
      selectedImage: ''
    }
  },
  methods: {
    openModal(img) {
      this.selectedImage = img
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
    }
  }
}
</script>

<style>
.thumbnail {
  width: 100px;
  height: 100px;
  margin: 5px;
  cursor: pointer;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
}
</style>

使用第三方库 vue-image-lightbox

安装 vue-image-lightbox 库可以快速实现功能丰富的图片预览：

npm install vue-image-lightbox --save

在组件中使用：

<template>
  <div>
    <button @click="showLightbox = true">Open Lightbox</button>

    <light-box 
      :images="images"
      :show-light-box="showLightbox"
      @on-close="showLightbox = false"
    />
  </div>
</template>

<script>
import LightBox from 'vue-image-lightbox'

export default {
  components: {
    LightBox
  },
  data() {
    return {
      images: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        { src: 'image3.jpg' }
      ],
      showLightbox: false
    }
  }
}
</script>

使用 Element UI 的 Image 组件

如果项目中使用 Element UI，可以直接使用其内置的图片预览功能：

<template>
  <div>
    <el-image 
      v-for="(img, index) in images"
      :key="index"
      :src="img"
      :preview-src-list="images"
    >
    </el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
    }
  }
}
</script>

实现手势缩放和滑动功能

对于需要更复杂交互的场景，可以结合 hammer.js 和 vue-touch 库实现手势操作：

npm install hammerjs vue-touch --save

在组件中实现手势控制：

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

export default {
  methods: {
    handlePinch(event) {
      // 处理缩放逻辑
      const scale = event.scale
      this.imageScale = scale > 1 ? scale : 1
    },
    handlePan(event) {
      // 处理平移逻辑
      this.imagePosition = {
        x: event.deltaX,
        y: event.deltaY
      }
    }
  }
}