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" v-viewer>
  </div>
</template>

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

使用原生 JavaScript 实现图片预览

创建一个图片预览组件：

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

    <div v-if="showPreview" class="preview-modal" @click="closePreview">
      <img :src="currentImage" class="preview-image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      showPreview: false,
      currentImage: ''
    }
  },
  methods: {
    previewImage(src) {
      this.currentImage = src
      this.showPreview = true
      document.body.style.overflow = 'hidden'
    },
    closePreview() {
      this.showPreview = false
      document.body.style.overflow = ''
    }
  }
}
</script>

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

.preview-modal {
  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: 1000;
}

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

使用 HTML5 的 dialog 元素实现预览

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

    <dialog ref="previewDialog" class="image-dialog">
      <img :src="dialogImage" class="dialog-image">
      <button @click="closeDialog" class="close-button">×</button>
    </dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      dialogImage: ''
    }
  },
  methods: {
    openDialog(src) {
      this.dialogImage = src
      this.$refs.previewDialog.showModal()
    },
    closeDialog() {
      this.$refs.previewDialog.close()
    }
  }
}
</script>

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

.image-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
}

.dialog-image {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
}
</style>

实现图片放大缩小功能

在原生实现的预览组件中添加以下方法：

methods: {
  zoomIn() {
    const img = this.$refs.previewImage
    img.style.transform = `scale(${img.dataset.scale || 1 * 1.2})`
    img.dataset.scale = img.dataset.scale || 1 * 1.2
  },
  zoomOut() {
    const img = this.$refs.previewImage
    img.style.transform = `scale(${img.dataset.scale || 1 / 1.2})`
    img.dataset.scale = img.dataset.scale || 1 / 1.2
  },
  resetZoom() {
    const img = this.$refs.previewImage
    img.style.transform = 'scale(1)'
    img.dataset.scale = 1
  }
}

在模板中添加控制按钮：

<div class="zoom-controls">
  <button @click="zoomIn">+</button>
  <button @click="zoomOut">-</button>
  <button @click="resetZoom">Reset</button>
</div>