vue图片预览实现

实现图片预览的方法

使用第三方库（如viewer.js）

安装viewer.js库：

npm install v-viewer

在Vue项目中引入并注册：

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

模板中使用：

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

<script>
export default {
  data() {
    return {
      imgs: [
        'image1.jpg',
        'image2.jpg'
      ]
    }
  },
  mounted() {
    this.$viewerApi({
      images: this.imgs
    })
  }
}
</script>

使用Element UI的el-image组件

安装Element UI：

npm install element-ui

引入组件：

import { Image } from 'element-ui'
Vue.use(Image)

模板中使用：

<template>
  <el-image 
    style="width: 100px; height: 100px"
    :src="url"
    :preview-src-list="srcList">
  </el-image>
</template>

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

自定义实现图片预览

创建预览组件：

<template>
  <div class="preview-wrapper" v-show="visible" @click="close">
    <img :src="currentImg" class="preview-img">
    <div class="preview-actions">
      <button @click.stop="prev">上一张</button>
      <button @click.stop="next">下一张</button>
      <button @click.stop="close">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgs: Array,
    index: Number,
    visible: Boolean
  },
  computed: {
    currentImg() {
      return this.imgs[this.index]
    }
  },
  methods: {
    prev() {
      this.$emit('update:index', (this.index - 1 + this.imgs.length) % this.imgs.length)
    },
    next() {
      this.$emit('update:index', (this.index + 1) % this.imgs.length)
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
.preview-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.preview-img {
  max-width: 80%;
  max-height: 80%;
}
.preview-actions {
  position: absolute;
  bottom: 20px;
}
</style>

使用Vant的ImagePreview组件

安装Vant：

npm install vant

引入组件：

import { ImagePreview } from 'vant'
Vue.use(ImagePreview)

调用预览：

ImagePreview({
  images: [
    'image1.jpg',
    'image2.jpg'
  ],
  startPosition: 0
})

注意事项

• 大图预览需要考虑性能优化，可添加懒加载
• 移动端需考虑手势操作（缩放、滑动切换）
• 需要处理图片加载失败的情况
• 预览组件建议使用fixed定位，避免影响页面布局