vue实现基于elementui的全屏图片自定义预览

产品开发中遇到一个点击列表文件实现文件预览的功能，比如视频就去播放页，office就打开，图片就全屏预览，因为产品是基于vue2+elementui开发的，第一时间想到的是第三方的package实现， v-viewer安装后看了一下不大气协调，于是又转到elementUI看了一下，发现el-image是有这个功能的，而且支持旋转、放大缩小，原图，鼠标滚动，列表预览等基础功能，但是是基于小图点击预览大图的，官方api也没有提供触发预览的事件，
但是只要是点击后预览能就说明有事件驱动，仔细看了一下代码，研究发现触发预览是有个showViewer的属性，它可以实现点击任意元素预览图片的，只需要把原来的点击小图预览的小图大小直接设置为0即可，这样引入父组件就可以直接使用了，实现如下，直接贴代码：

ImageViewer.vue

<template>
 <div class="image-preview">
  <el-image
    style="width: 0; height: 0"
    ref="previewImg"
    :src="url"
    :preview-src-list="srcList">
  </el-image>
</div>
</template>

<script>
export default {
    
    
  props: {
    
    
    srcList: {
    
    
      type: Array,
      required: true,
      default: null
    }
  },
  data () {
    
    
    return {
    
    
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      // srcList: []
    }
  },
  methods: {
    
    
    viewBigPicture () {
    
    
      this.$refs.previewImg.showViewer = true
    }
  }
}
</script>
<style lang="scss">
.el-image-viewer__btn{
    
    
  opacity: 1;
}
</style>

父组件：

<template>
 <div class="xxx">
    <!-- 图片预览 -->
    <image-viewer :srcList="srcList" ref="imgViewer"></image-viewer>
  </div>
</template>

<script>
import ImageViewer from '@/common/ImageViewer'
export default {
    
    
  components: {
    
     ImageViewer },
  data () {
    
    
    return {
    
    
       srcList: [] // 图片预览测试, 预留预览图片列表
    }
  },
  methods: {
    
    
  	// 图片预览
    previewImage(){
    
    
      this.srcList = [ ...xxximgeList ]
      this.$refs.imgViewer.viewBigPicture()
  }
}
</script>
<style lang="scss">
</style>

很简单的一个图片全屏预览组件就实现了，其实还是借鉴了el-image原来的图片预览功能，只是把触发预览的事件暴露出来了而已，使用的时候直接赋值srcList图片列表，在调用viewBigPicture方法即可，你可以传入单张图片，亦可以传入图片列表。

ps: 要把原来的点击小图预览的小图大小直接设置为0，否则会显示“加载失败”的样式，这不是我们想要的

vue实现基于elementui的全屏图片自定义预览

猜你喜欢