vue实现图片预览

Vue实现图片预览的方法

使用Element UI的el-image组件

Element UI提供了el-image组件，内置图片预览功能。安装Element UI后可直接使用：

<template>
  <el-image 
    :src="imageUrl" 
    :preview-src-list="previewList"
    fit="cover">
  </el-image>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image1.jpg',
      previewList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg'
      ]
    }
  }
}
</script>

使用viewer.js插件

viewer.js是专业的图片预览库，支持缩放、旋转等功能：

npm install viewerjs

在Vue组件中使用：

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

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg']
    }
  },
  mounted() {
    new Viewer(this.$el.querySelector('.preview-image'), {
      toolbar: {
        zoomIn: 1,
        zoomOut: 1,
        rotateLeft: 1,
        rotateRight: 1
      }
    })
  }
}
</script>

自定义实现预览功能

通过CSS和Vue指令实现基础预览：

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

    <div v-if="showModal" class="preview-modal" @click="showModal = false">
      <img :src="previewImage" class="preview-content">
    </div>
  </div>
</template>

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

<style>
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preview-content {
  max-width: 90%;
  max-height: 90%;
}
</style>

使用vue-photo-preview插件

专门为Vue开发的图片预览组件：

npm install vue-photo-preview

注册插件：

import Vue from 'vue'
import VuePhotoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

Vue.use(VuePhotoPreview)

在模板中使用：

<template>
  <img v-for="(img, index) in images" 
       :src="img" 
       :key="index" 
       v-preview="img"
       preview-title="图片预览">
</template>

移动端优化方案

对于移动端项目，建议添加手势支持：

npm install hammerjs

在自定义预览组件中集成手势：

import Hammer from 'hammerjs'

mounted() {
  const previewEl = this.$el.querySelector('.preview-content')
  const hammer = new Hammer(previewEl)

  hammer.on('pinch', (e) => {
    // 实现缩放逻辑
  })

  hammer.on('pan', (e) => {
    // 实现拖拽逻辑
  })
}