第一種：（使用elementUi官網(wǎng)文檔中的組件）一般項目中需要點擊觸發(fā)事件才進行查看大圖，elementUi組件庫中并沒有寫觸發(fā)需要執(zhí)行的代碼，這里在觸發(fā)的方法中加this.$refs.preview.clickHandler()觸發(fā)查看大圖功能

?

<template>
  <!-- 圖片預覽方法一 -->
  <div class="demo-image__preview">
    <el-button @click="onPreview">預覽</el-button>
    <el-image
      style="width: 100px; height: 100px"
      ref="preview"
      :src="url"
      :preview-src-list="srcList"
    ></el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  components: {},
  methods: {
    onPreview() {
      this.$refs.preview.clickHandler();
    },
  },
};
</script>

<style></style>

第二種：（ 使用el-image-viewer組件，是elementUi自帶的但官網(wǎng)文檔中可能因不兼容IE沒有把它暴露出來，不需要下載包引入即可）文章來源地址http://www.zghlxwxcb.cn/news/detail-524798.html

<template>
  <div>
    <el-button @click="onPreview">預覽</el-button>
    <el-image
      style="width: 100px; height: 100px"
      ref="preview"
      :src="url"
      :preview-src-list="srcList"
    ></el-image>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
    />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: { ElImageViewer },
  data() {
    return {
      showViewer: false,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  methods: {
    onPreview() {
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
  },
};
</script>

<style></style>

到了這里，關于elementUi 通過點擊預覽按鈕實現(xiàn) 預覽大圖previewSrcList（兩種方式）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！