elementui预览图片按钮触发

Posted 2021-09-25 yingmhd

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,否则不能触发