图片大图预览就该这样做

在管理系统开发过程中,我们不可避免需要预览一些上传的图片。小编在开发过程中就遇到需要实现在列表上点击"查看"按钮预览该条记录上的所有图片。

项目所用技术栈:vue、element ui

我们都知道el-image组件可以通过previewSrcList 开启预览大图的功能,那么是否可以基于该组件实现预览功能呢?当然是可以的。

下面就是小编开发的图片预览组件,其原理就是通过手动触发el-image的预览大图功能

js 复制代码
<template>
  <!-- 图片预览 -->
  <el-image
    id="previewImage"
    style="
      opacity: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    "
    :src="logo"
    :preview-src-list="imagesList"
    fit="fill"
    @click.stop="handleClick"
  />
</template>
<script lang="ts">
import Vue from 'vue'
// 给个默认的图片地址,使el-image相关的dom元素都能存在
import logo from '@/assets/images/logo.png'
import { Loading } from 'element-ui'
import { showPic } from '@/api/common'

export default Vue.extend({
  name: 'SeeImages',
  props: ['imagesDialogVisible', 'imageIdList'],
  data() {
    return { logo, imagesList: [], loadingInstance: null }
  },
  created() {
    // 根据图片id调用接口获取到图片的url
    this.loadingInstance = Loading.service({ fullscreen: true })
    const promiseArr = []
    for (const i of this.imageIdList) {
      // thumbnailType缩略图类型0-非缩略图 1-缩略图
      promiseArr.push(showPic({ id: i, thumbnailType: 0 }))
    }
    Promise.all(promiseArr)
      .then((res) => {
        const images = []
        res.forEach((item) => {
          images.push(
            'data:image/png;base64,' +
              btoa(
                new Uint8Array(item.data).reduce(
                  (data, byte) => data + String.fromCharCode(byte),
                  ''
                )
              )
          )
        })
        this.imagesList = images
        this.$nextTick(() => {
          // 触发el-image的预览功能
          const element = document.querySelectorAll(
            '#previewImage'
          )[0] as HTMLElement
          if (element) {
            element.click()
          }
        })
      })
      .finally(() => {
        this.loadingInstance.close()
      })
  },
  methods: {
    handleClick() {
      // 关闭预览的时候移除组件
      const that = this
      setTimeout(function () {
        const domImageMask = document.querySelector('.el-image-viewer__wrapper')
        if (!domImageMask) {
          return
        }
        domImageMask.addEventListener('click', (e) => {
          if (
            [
              'el-image-viewer__btn el-image-viewer__prev',
              'el-image-viewer__btn el-image-viewer__next',
              'el-image-viewer__btn el-image-viewer__actions',
              'el-image-viewer__actions__inner',
              'el-image-viewer__canvas'
            ].includes((e.target as any).parentNode?.className || '')
          ) {
            return
          }
          that.$emit('update:imagesDialogVisible', false)
        })
      }, 300)
    }
  }
})
</script>
相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构