Vue.js 如何在元素ui中预览图像？

我正在使用element ui

el image

。我想在单击时预览我的图像（

：preview src list

）。但当我第一次点击时，它不会预览任何内容。这是我下载的图片。所以我需要点击2次。但我想点击1次

以下是我的模板代码：

ts代码：

src=null；
srcList=[]；
产品='shoe1'；
imgClick（）{
prevImg（产品）。然后（resp=>{
constURL=window.url.createObjectURL（新Blob（[resp.data]）；
this.srclist=[url]；
});
}
@手表（“产品”）
更改（值）{
getProductImage（值）。然后（resp=>{
constURL=window.url.createObjectURL（新Blob（[resp.data]）；
this.src=url；
}).catc（e=>{
警报（e）；
});
}
安装的（）{
本.更改（产品）；
}

我认为这些事情会发生，因为当你点击该图像时，它会触发

clickHandler

：

。。。
clickHandler（）{
//预览为false时不显示查看器
如果（！this.preview）{
返回；
}
...
}
...

从

而

预览

是计算属性：

。。。
预览（）{
const{previewSrcList}=this；
返回Array.isArray（previewSrcList）和&previewSrcList.length>0；
}
...

从

因此，在第一次单击时什么也没有发生，但在那之后，您可以设置

预览src列表

，然后再次单击它，它就可以工作了

如果您的代码是同步的，您可以使用类似于

mousedown

的事件，它将在

单击事件之前触发




但是，如果您的代码是异步的，那么您可以使用refs，然后调用
clickHandler

。。。
//拿东西
这个.$nextTick（（）=>{
这是。$refs.elImage.clickHandler（）
})
...