当前位置：首页 > VUE

vue实现弹照片

2026-01-15 02:27:05VUE

Vue 实现图片弹窗展示

安装依赖 确保项目中已安装 Vue.js，若需图片预览组件可安装第三方库如 vue-photo-preview：

npm install vue-photo-preview --save

基础实现（原生方式） 创建一个控制弹窗显示隐藏的变量，结合 v-if 和 CSS 实现弹窗效果：

<template>
  <div>
    <img 
      src="your-image-path.jpg" 
      @click="showModal = true"
      style="cursor: pointer;"
    >

    <div v-if="showModal" class="modal" @click.self="showModal = false">
      <div class="modal-content">
        <img src="your-image-path.jpg" style="max-width: 90vw; max-height: 90vh;">
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.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;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

使用 vue-photo-preview 库 实现多图预览和手势操作：

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

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

Vue.use(preview)

export default {
  data() {
    return {
      images: [
        { src: 'thumbnail-1.jpg', previewSrc: 'fullsize-1.jpg' },
        { src: 'thumbnail-2.jpg', previewSrc: 'fullsize-2.jpg' }
      ]
    }
  }
}
</script>

Element UI 方案 若使用 Element UI，可直接调用其 Dialog 组件：

<template>
  <div>
    <el-image 
      src="image-url.jpg" 
      @click="dialogVisible = true"
      style="width: 200px; cursor: pointer;"
    ></el-image>

    <el-dialog :visible.sync="dialogVisible">
      <img src="image-url.jpg" style="width: 100%;">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

注意事项