vue element组件image-viewer使用注意

• 引用
• 注意事项

引用

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

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

引用完了，注册为组件

//单个vue只引用这一个组件写法components: {ElImageViewer},//单个vue已经引用一个组件，在原来的组件的components里加上，ElImageViewercomponents: { 原页面上组件,ElImageViewer},

使用：

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

注意
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']

注意事项

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