element利用image-viewer组件实现大图预览和图片动态加载

element的el-image组件支持大图预览模式,但需要和小图模式配合使用,项目中刚好有需求需要直接使用大图预览并且需要支持图片的动态加载,研究了一下el-image组件的源码发现el-image组件是通过引用image-viewer组件实现的大图预览的,刚好可以利用一下!

image-viewer属性

urlList: 图片列表,数组类型
onSwitch: 图片切换事件
onClose: 关闭事件
initialIndex: 图片预览初始图片index
zIndex:设置图片预览的 z-index

源码

JSON 复制代码
  props: {
    urlList: {
      type: Array,
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    onSwitch: {
      type: Function,
      default: () => {}
    },
    onClose: {
      type: Function,
      default: () => {}
    },
    initialIndex: {
      type: Number,
      default: 0
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: true
    }
  }

项目使用

页面需要单独引入image-viewer组件,打开大图预览时通过接口默认从后台获取2张图片,然后再利用图片切换事件onSwitch在浏览第二张图片时从后台获取第3张图片,依此类推以实现图片的动态加载。
小贴士: 项目中也要求图片要通过 token 访问,于是后台接口读取图片返回图片流,前端使用URL.createObjectURL生成图片临时地址即可。

代码

HTML 复制代码
<template>
  <basic-container>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :onSwitch="switchImage"
      :url-list="imageList" />
  </basic-container>
</template>

<script>

export default {
  data () {
    return {
      imageList: [],
      imgViewerVisible: false
    }
  },
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  methods: {
   //打开大图预览
    view (row) {
      this.imageList = []
      this.image(row, 0)
    },
	//通过接口获取图片列表,默认获取两张
    image (row, index) {
      let query = {}
      query.page = index + 1
      preview(query).then((response) => {
	    //后台返回图片流,利用createObjectURL生成临时对象地址
        const blob = new Blob([response], {
          type: 'image/jpeg'
        })
        this.imgViewerVisible = true
        this.imageList.push(window.URL.createObjectURL(blob))
        if (index === 0 && row.pageCount > 1) {
          this.image(row, 1)
        }
        console.log(this.imageList.length)
      }).catch((response) => {
        console.error('预览出错', response)
      })
    },
	//关闭大图预览
    closeImgViewer () {
      this.imgViewerVisible = false
    },
	//图片切换事件,浏览第二张时获取第三张,依此类推
    switchImage (index) {
      if (index > this.index && this.imageList.length - 1 === index && this.imageList.length < this.currentRow.pageCount) {
        this.image(this.currentRow, this.imageList.length)
      }
      this.index = index
    }
  }
}
</script>

进阶优化

image-viewer组件有个小问题,大图预览模式图片缩放时页面如果有滚动条也会跟着滚动体验不太好,可以在打开大图模式时禁用页面滚动,关闭大图模式再启用页面滚动

代码

HTML 复制代码
    //打开大图预览
    view (row) {
	  this.disableMove()
      this.imageList = []
      this.image(row, 0)
    },
    //关闭大图预览
    closeImgViewer () {
      this.imgViewerVisible = false
	  this.enableMove()
    },
    disableMove () {
      const m = (e) => { e.preventDefault() }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', m, false)
    },
    enableMove () {
      const m = (e) => { e.preventDefault() }
      document.body.style.overflow = 'auto'
      document.removeEventListener('touchmove', m, true)
    }
相关推荐
喜欢敲代码的程序员9 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_12 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte17 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj10 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D10 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说11 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说11 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
雲墨款哥11 天前
记录:vue-next-admin 项目 element-plus 国际化包报错的解决办法
前端·element
sunbyte11 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·javascript·css·vue.js·vue
麦兜*11 天前
【node】Mac m1 安装nvm 和node
java·前端·vue.js·chrome·macos·vue·nvm