产品开发中遇到一个点击列表文件实现文件预览的功能,比如视频就去播放页,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,否则会显示“加载失败”的样式,这不是我们想要的