vue 实现预览图片

实现图片预览功能

使用 v-viewer 插件

安装 v-viewer 插件：

npm install v-viewer

在 main.js 中引入并配置：

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

组件中使用：

<template>
  <div>
    <img v-for="src in images" :src="src" :key="src" @click="show">
    <viewer :images="images" ref="viewer">
      <template slot-scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
      </template>
    </viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg']
    }
  },
  methods: {
    show() {
      this.$refs.viewer.show()
    }
  }
}
</script>

使用原生 JavaScript 实现

创建图片预览组件：

<template>
  <div>
    <img 
      v-for="(img, index) in imgList" 
      :src="img" 
      :key="index"
      @click="previewImg(index)"
      class="preview-img"
    >
    <div v-if="showPreview" class="preview-container">
      <span class="close-btn" @click="closePreview">×</span>
      <img :src="currentImg" class="preview-content">
    </div>
  </div>
</template>

<script>
export default {
  props: ['imgList'],
  data() {
    return {
      showPreview: false,
      currentImg: ''
    }
  },
  methods: {
    previewImg(index) {
      this.currentImg = this.imgList[index]
      this.showPreview = true
    },
    closePreview() {
      this.showPreview = false
    }
  }
}
</script>

<style>
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.preview-content {
  max-width: 90%;
  max-height: 90%;
}
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
.preview-img {
  cursor: pointer;
  margin: 5px;
  max-width: 100px;
  max-height: 100px;
}
</style>

使用第三方库 vue-photo-preview

安装：

npm install vue-photo-preview

使用方式：

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

模板中使用：

<img v-for="src in images" :src="src" :key="src" v-preview="src">

实现图片缩放和旋转功能

扩展原生实现：

<template>
  <div class="preview-container" v-if="showPreview">
    <div class="toolbar">
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
      <button @click="rotateLeft">左旋转</button>
      <button @click="rotateRight">右旋转</button>
      <button @click="closePreview">关闭</button>
    </div>
    <img 
      :src="currentImg" 
      class="preview-content"
      :style="{
        transform: `scale(${scale}) rotate(${rotate}deg)`,
        transition: 'all 0.3s'
      }"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      rotate: 0
    }
  },
  methods: {
    zoomIn() {
      this.scale += 0.1
    },
    zoomOut() {
      if (this.scale > 0.2) {
        this.scale -= 0.1
      }
    },
    rotateLeft() {
      this.rotate -= 90
    },
    rotateRight() {
      this.rotate += 90
    },
    resetTransform() {
      this.scale = 1
      this.rotate = 0
    }
  }
}
</script>