vue点击按钮预览图片

<template>
  <div class="container-wrap">
    <span class="look-btn" @click="handlePreview">查看</span>
    <el-image class="pre-box" ref="preview" :src="imageUrl" :preview-src-list="imageList" />
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      imageUrl: "",  // 图片地址
      imageList: []  // 预览图片
    };
  },
  components: {},
  filters: {},
  mounted() {},
  methods: {
    handlePreview() {
      thi.$refs.preview.clickHandler();
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.pre-box{
  width: 0px;
  height: 0px;
}
</style>

实现思路：点击查看按钮时触发el-image的点击事件

注意：有时可能会出现第一次点击查看按钮时clickHandler方法未触发，无法预览。此时可以在外面嵌套nextTick

handlePreview() {
  this.$nextTick(() => {
    thi.$refs.preview.clickHandler();
  });
}