使用element-ui+vue2如何实现点击按钮直接弹出图片预览效果的图片？

1.使用element的哪个组件？

正常想实现可以放大缩小的预览功能，需要使用el-image组件，element-ui组件文档是这样写的

//可通过 previewSrcList 开启预览大图的功能<div class="demo-image__preview"><el-image style="width: 100px; height: 100px":src="url" :preview-src-list="srcList"></el-image></div><script>export default {data() {return {url: '/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',srcList: ['/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']}}}</script>

但此种写法是指，点击完小图之后，才会出现预览的大图，和我们需要的效果并不一致，我们需要点击按钮直接出预览图。因此需要直接使用el-image-viewer组件。

//预览按钮 <el-button size="mini" class="basics" type="text" @click="showPic(data.row)">预览</el-button>// 图片预览 <el-image-viewerstyle="z-index:1500"v-if="showImageViewer":on-close="()=>{showImageViewer = false}":url-list="imageData">//引入组件export default{components: {'el-image-viewer':()=>import("element-ui/packages/image/src/image-viewer") },data(){return{showImageViewer:false, //控制图片预览imageData:"", //返回的base64img数据}},methods:{async showPic(data){let res = await yulan({fileId:data.fileId,entityName:data.entityName}); //接口数据为base64格式if(res.data){const url = 'data:image/png;base64,' + res.data;this.imageData = [url]this.showImageViewer = true}else{this.$message({showClose: true,message: '暂无图片',type: 'error'});}}}}