在后台管理中经常会遇到图片预览的需求，这不，来了个新需求，点击按钮，然后图片放大预览。

不想自己写，网上找了半天也没找到，图片预览组件倒是有一大堆，不过都是图片本身，然后点击出现预览效果，没有那种可以点击任何元素，然后出现图片预览的

没办法，需求下来了，还是得做，用了这么久的 element ui，没发现，原来 element ui 还可以这样用，官方文档上死活找不到，但是他组件库里其实是有这组件的。图片预览组件 el-image-viewer

具体用法是这样的：

1。引入 el-image-viewer 组件

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

compotents: {
	ElImageViewer
}

2、组件中使用如下：

<el-button type="text" @click="onPreview()">图片预览</el-button>
<el-image-viewer 
	v-if="showViewer" 
	:on-close="closeViewer" 
	:url-list="[previewUrl]" />

3、具体实现：

data () {
	return {
		showViewer: false,
		previewUrl: ''
	}
},
methods: {
	closeViewer () {
		this.showViewer = false
	},
	onPreview (url) {
		this.previewUrl = url
		this.showViewer = true
	}
}

看了下源码，发现功能还是蛮丰富的，可以传初始索引 initialIndex 字段，即图片预览时默认展示第几张图，可传层级 zIndex 字段，如果 url-list 属性的值，数组中有多张图，则会出现左右切换按钮等等，当然了，图片放大、缩小、旋转这些基本功能也都是有的。