vue项目中实现按钮触发el-image进行图片预览

项目中需要使用到点击按钮来进行图片预览。

具体代码为：

1. 按钮点击，我这里使用的是图片的icon图标来代替button按钮。

    <el-icon
        @click="previewFun(scope.row)"
        size="16"
        title="图片预览"
       　>
　　　　　　<PictureFilled/>
   </el-icon>    

2.使用el-image来实现图片预览功能


        <el-image
                style="width: 100 px; height:100px;display: none;"
                :src="url"
                :zoom-rate="1.2"
                :preview-teleported="true"
                :preview-src-list="[url]"
                :initial-index="1"
                fit="cover"
                ref="imgViewRef"
            />

注意：preview-teleported="true"必须要添加这个，否则的话当我们将el-image隐藏后，点击触发的放大预览也会消失。

 3.方法触发

const previewFun = (data_)=>{
    setTimeout(() => {
        imgViewRef.value.$el.children[0].click();
    }, 0);
}

注意：这里增加延时，是因为初始化点击的时候el-image会先显示图片，再触发预览效果，如果图片没有显示出来，点击不会出现预览效果。