今天我们要实现点击图片跟点击图片边上的文字都能预览图片这样的一个效果,这边我是使用elementui里面的el-image组件
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit"></el-image>
因为我这边是使用render函数渲染出来的,这边有个点击按钮,如下代码
在图片那边先加个ref链接(如何通过render函数给ref组件设置生效)
这边我通过点击文件的名字,我是用id当成ref,然后通过this.
r
e
f
s
[
p
a
r
a
m
s
.
r
o
w
.
i
d
]
.
s
h
o
w
V
i
e
w
e
r
=
t
r
u
e
把
原
本
的
图
片
显
示
出
来
有
时
候
需
要
看
看
t
h
i
s
.
refs[params.row.id].showViewer = true把原本的图片显示出来 有时候需要看看this.
refs[params.row.id].showViewer=true把原本的图片显示出来有时候需要看看this.refs[params.row.id]的值,先打印看看,不然直接写,可能会说showViewer 不存在的情况