vue使用elementUi中的图片查看器el-image-viewer

vue使用element中的图片查看器el-image-viewer

安装elementUi

 1. npm i element-ui -S；
 2. main.js中引入 ：
	import ElementUI from 'element-ui'
	Vue.use(ElementUI)

1. JS中引入图片查看组件：

import elImageViewer from 'element-ui/packages/image/src/image-viewer';

components: {elImageViewer},

2. html中使用：

 <el-image-viewer v-if="showPictureView" :zIndex="Number(99999)" :on-close="closeImgViewer" :url-list="viewImgList" :initialIndex="viewPicIndex" />

3. js参数：

showPictureView: false,                        // 是否显示图片预览
viewPicIndex: 0,                      			    // 图片预览下标
viewImgList: [],                      			    // 图片预览列表

4. js 关闭图片预览方法：

closeImgViewer() {
	this.showPictureView = false;
}