使用element ui自己封装的组件ElImageViewer 实现图片预览功能，使用js 控制图片预览的时机，及触发方式，js自定义显示隐藏预览图片

基于Element ui 实现 预览功能，点击图片或双击图片时显示，js自定义显示隐藏预览图片

1. 引入element ui 封装好的组件 ElImageViewer，在components: 中进行声明

 import ElImageViewer from "element-ui/packages/image/src/image-viewer";
 components: { ElImageViewer},

2. html

//双击img 图片 调用预览 
<div class="pictrueList_pic mr10 mb10" v-for="(item, index) in pictrueList" :key="index">
	<img :src="item.picUrl" @dbclick="preViewImg(index, pictrueList)"/>
</div>
<el-image-viewer 
  v-if="showViewer"
   :url-list="srcList"
   :initialIndex="initialIndex"
   :on-close="closeViewer">
 </el-image-viewer>

3. data

data(){
	return {
		showViewer: false,
		srcList: [],//预览的数组,每一项是图片的链接
		initialIndex:0,//图片预览初始图片index，
		pictrueList: [
			{picUrl:'https://file.iviewui.com/images/image-demo-10.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-11.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-12.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-13.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-14.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-15.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-16.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-17.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-18.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-19.jpg'},
	        {picUrl:'https://file.iviewui.com/images/image-demo-20.jpg'},
		]
	}
}
	

4. methods 中的函数

preViewImg(index,arr){
	this.srcList = arr.map(item=>item.picUrl);
	this.initialIndex = index
	this.showViewer = true;
},
// 敞开查看器
closeViewer() {
	this.showViewer = false;
},

使用element ui自己封装的组件实现图片预览功能，使用js 控制图片预览的时机，及触发方式