element ui el-image 动态预览图片
实现目标：点击图标预览指定的图片
默认需要使用el-image 标签点击图片才可以预览图片
<el-image :src="url" :preview-src-list="srcList" :initial-index="4" />
实现原理，点击图标动态修改preview-src-list 与 initial-index 参数
html
<el-image id="elImg" style="height: 0px;overflow: hidden;" src="放一个有效的图片地址" :preview-src-list="srcList" :initial-index="srcListIndex"/> <el-button @click="preview(src)">图片预览</el-button>
data
return {
srcList:['图片地址1','图片地址2','图片地址3'],
srcListIndex:0
}methods
//图片预览
preview(src){
this.srcListIndex= this.srcList.indexOf(src);
document.querySelectorAll('#elImg .el-image__preview')[0].click();
}