During product development, I encountered a function of clicking on a list file to realize file preview. For example, if a video goes to the play page, office will open, and the picture will be previewed in full screen. Because the product is developed based on vue2+elementui, the first thing that comes to mind is a third party. Package implementation. After installing v-viewer, I looked at it and it seemed uncoordinated. So I went to elementUI and looked at it. I found that el-image has this function and supports rotation, zooming in, original image, mouse scrolling, list preview, etc. The basic function is based on clicking on a small image to preview a large image. The official API does not provide an event to trigger the preview, but
as long as the preview can be done after clicking, it means that it is event-driven. After carefully looking at the code, I found that there is an event that triggers the preview. The attribute of showViewer allows you to click on any element to preview the image. You only need to set the size of the original thumbnail preview to 0. In this way, you can use it directly by introducing the parent component. The implementation is as follows. Paste the code directly. :
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>
Parent component:
<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>
A very simple picture full-screen preview component is implemented. In fact, it still draws on the original picture preview function of el-image, but only exposes the event that triggers the preview. When using it, directly assign the srcList picture list, and call the viewBigPicture method. Yes, you can pass in a single image or a list of images.
ps: You need to set the size of the original thumbnail preview directly to 0, otherwise the "Loading Failed" style will be displayed, which is not what we want.