vue element组件image-viewer使用注意

迈不过友情╰ 2023-01-10 01:27 284阅读 0赞

# 引用 #

在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"  />

或者使用

> **注意**  
> **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就行了。