vue element组件image-viewer使用注意

引用

在vue头中引用组件，因为image-viewer是属于Image组件中一个单独的功能，我们单独导入此包。
代码如下：

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

引用完了，注册为组件

//单个vue只引用这一个组件写法
components: {ElImageViewer},

使用：

<el-image-viewer
    v-if="showViewer"
    :on-close="()=>{showViewer=false}"
    :url-list="viewUrl"  />      

或者使用

<template slot-scope="scope">
    <el-image-viewer
         v-if="showViewer"
         :on-close="closeViewer"
         :url-list="viewUrl" style="color: red"/>
     <el-button type="text" v-bind:disable=" scope.row.urlList.length === 0" @click="onPreview(scope.row.urlList)">查看图片</el-button>
</template>

注意
showViewer：控制开关的绑定变量，可自定义。
on-close： 关闭事件，可绑定关闭触发事件。
url-list： 指向图片的url地址，用于显示预览的图片
viewUrl：此处为数组（viewUrl = [ ]），记得使用push存放,和清除数组的缓存。

举例

	showViewer: false,
    viewUrl: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
    ]

js中函数

onPreview(path) {
	this.srcList = path
	this.showViewer = true
},
closeViewer() {
	this.showViewer = false
},

注意事项

1.记得初始化数组，保证你的数组数据正确
2.此处有用法上的歧义，当在for循环中调用此组件，因为其绑定的opacity（不透明）属性，在同一父级下透明度为父opacity*子opacity。所以单个图片的蒙层会和多图时蒙层颜色不一致（通俗讲，多个图片时，你的背景会是黑的）
解决方法：不在for中调用，只要保证你的每次打开时能将url赋值进你的viewUrl就行了。