vue实现图片预览

实现图片预览功能

在Vue中实现图片预览功能可以通过多种方式完成，常见的有使用原生HTML5的<dialog>元素、第三方库如viewer.js或vue-photo-preview，以及自定义模态框组件。

使用原生HTML5的dialog元素

HTML5的<dialog>元素提供了一种简单的原生模态框实现方式，结合Vue的数据绑定可以轻松实现图片预览。

<template>
  <div>
    <img 
      :src="thumbnailSrc" 
      @click="openDialog"
      style="cursor: pointer; width: 200px;"
    >
    <dialog ref="dialog">
      <img :src="fullSizeSrc" style="max-width: 80vw; max-height: 80vh;">
      <button @click="closeDialog">关闭</button>
    </dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thumbnailSrc: 'path/to/thumbnail.jpg',
      fullSizeSrc: 'path/to/fullsize.jpg'
    }
  },
  methods: {
    openDialog() {
      this.$refs.dialog.showModal()
    },
    closeDialog() {
      this.$refs.dialog.close()
    }
  }
}
</script>

使用viewer.js库

viewer.js是一个功能强大的图片查看器库，支持缩放、旋转、翻转等操作。

安装viewer.js：

npm install viewerjs

在Vue组件中使用：

<template>
  <div>
    <img
      v-for="src in imgList"
      :src="src"
      :key="src"
      @click="showViewer"
      style="width: 200px; cursor: pointer;"
    >
  </div>
</template>

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

export default {
  data() {
    return {
      imgList: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
      ],
      viewer: null
    }
  },
  methods: {
    showViewer() {
      this.viewer = new Viewer(this.$el, {
        inline: false,
        toolbar: {
          zoomIn: 1,
          zoomOut: 1,
          oneToOne: 1,
          reset: 1,
          rotateLeft: 1,
          rotateRight: 1,
          flipHorizontal: 1,
          flipVertical: 1,
        }
      })
      this.viewer.show()
    }
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy()
    }
  }
}
</script>

使用vue-photo-preview插件

vue-photo-preview是专为Vue设计的图片预览插件，使用更简单。

安装：

npm install vue-photo-preview

在main.js中全局引入：

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

Vue.use(preview)

在组件中使用：

<template>
  <div>
    <img
      v-for="src in imgList"
      :src="src"
      :key="src"
      v-preview="src"
      preview-title-enable="true"
      preview-nav-enable="true"
      style="width: 200px;"
    >
  </div>
</template>

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

自定义图片预览组件

对于需要完全自定义的场景，可以创建一个独立的图片预览组件。

<!-- ImagePreview.vue -->
<template>
  <div class="preview-container" v-if="visible" @click.self="close">
    <div class="preview-content">
      <img :src="src" class="preview-image">
      <button class="close-btn" @click="close">×</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: String,
    visible: Boolean
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
.preview-container {
  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-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

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

.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
</style>

在父组件中使用：

<template>
  <div>
    <img
      :src="imageSrc"
      @click="showPreview"
      style="width: 200px; cursor: pointer;"
    >
    <ImagePreview
      :src="imageSrc"
      :visible="previewVisible"
      @update:visible="previewVisible = $event"
    />
  </div>
</template>

<script>
import ImagePreview from './ImagePreview.vue'

export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      imageSrc: 'path/to/image.jpg',
      previewVisible: false
    }
  },
  methods: {
    showPreview() {
      this.previewVisible = true
    }
  }
}
</script>

以上方法提供了不同复杂度的实现方案，可以根据项目需求选择最适合的方式。原生HTML5方案最简单但功能有限，第三方库提供丰富功能但增加依赖，自定义组件则提供最大灵活性。