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会先显示图片,再触发预览效果,如果图片没有显示出来,点击不会出现预览效果。