关于javascript:elementui预览图片按钮触发

elementui图片预览的官网文档

<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: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',        srcList: [          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'        ]      }    }  }</script>

预览性能是通过点击图片触发的，然而需要是通过按钮触发预览

<div class="demo-image__preview">    <el-image class="my-img" :src="previewUrl" :preview-src-list="previewUrlList" ref="preview">    </el-image></div>

首先，页面中必须存在该dom，并且设置ref属性

this.$refs.preview.showViewer = true

而后通过设置showViewer实现预览成果

.my-img {    width: 100px;    height: 100px;}.my-img .el-image__inner,.el-image__error {    visibility: hidden;}

款式是重点，图片必须在页面上存在，不能设置display:none，也不能设置width:0;height:0,否则不能触发