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

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

具体代码为:

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

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

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

 1         <el-image
 2                 style="width: 100 px; height:100px;display: none;"
 3                 :src="url"
 4                 :zoom-rate="1.2"
 5                 :preview-teleported="true"
 6                 :preview-src-list="[url]"
 7                 :initial-index="1"
 8                 fit="cover"
 9                 ref="imgViewRef"
10             />

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

 3.方法触发

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

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

 

posted @ 2024-05-27 16:28  奔跑的哈密瓜  阅读(3573)  评论(0)    收藏  举报