当前位置：首页 > VUE

vue实现弹照片

2026-01-08 15:26:24VUE

Vue 实现图片弹窗展示

方法一：使用原生 HTML 和 Vue 指令

创建基础的图片弹窗组件，通过 v-if 或 v-show 控制显示状态。点击图片时触发弹窗展示。

<template>
  <div>
    <img 
      :src="thumbnailSrc" 
      @click="showModal = true"
      style="cursor: pointer; width: 100px;"
    >

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

<script>
export default {
  props: ['thumbnailSrc', 'fullSizeSrc'],
  data() {
    return {
      showModal: false
    }
  }
}
</script>

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

方法二：使用第三方库 vue-easy-lightbox

安装轻量级的图片预览库：

npm install vue-easy-lightbox

在组件中使用：

<template>
  <div>
    <img 
      v-for="(img, index) in imgs" 
      :key="index" 
      :src="img" 
      @click="show(index)"
      style="width: 100px; margin: 5px; cursor: pointer;"
    >

    <vue-easy-lightbox
      :visible="visible"
      :imgs="imgs"
      :index="index"
      @hide="handleHide"
    ></vue-easy-lightbox>
  </div>
</template>

<script>
import VueEasyLightbox from 'vue-easy-lightbox'

export default {
  components: {
    VueEasyLightbox
  },
  data() {
    return {
      imgs: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg'
      ],
      visible: false,
      index: 0
    }
  },
  methods: {
    show(index) {
      this.index = index
      this.visible = true
    },
    handleHide() {
      this.visible = false
    }
  }
}
</script>

方法三：使用 Element UI 的 Dialog 组件

如果项目使用 Element UI，可以利用其 Dialog 组件实现图片弹窗：

<template>
  <div>
    <img 
      :src="thumbnail" 
      @click="dialogVisible = true"
      style="width: 100px; cursor: pointer;"
    >

    <el-dialog 
      :visible.sync="dialogVisible" 
      width="80%"
      top="5vh"
    >
      <img :src="fullSize" style="width: 100%;">
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['thumbnail', 'fullSize'],
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

注意事项