elementUi 通过 previewSrcList 预览大图（两种方式）

组件 | Element：饿了么组件库大图预览功能 

第一种：（支持IE 使用elementUi官网文档中的组件）一般项目中需要点击触发事件才进行查看大图，elementUi组件库中并没有写触发需要执行的代码，这里在触发的方法中加this.$refs.preview.clickHandler()触发查看大图功能

 

<el-button @click="onPreview">预览</el-button>
<el-image ref="preview" :src="url" :preview-src-list="srcList"></el-image>

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'
      ],
        }
    },
    methods: {
        onPreview() {
          this.$refs.preview.clickHandler()
        },
    }
}　

第二种：（ 不支持IE　使用el-image-viewer组件，是elementUi自带的但官网文档中可能因不兼容IE没有把它暴露出来，不需要下载包引入即可）

<el-button @click="onPreview">预览</el-button>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
    components: { ElImageViewer },
    data() {
     return {
      showViewer: true,
      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
    },
    }
} 

 

 补充：

 

项目需求：点击查看大图要有上一页下一页，点击上下页按钮时展示每个图片的详情信息，这就需要在上下页按钮的方法中去写一些自己的逻辑接口请求代码，但是在网上找不到有关<el-image>标签的上下页按钮的特有方法。

页面如下：

　

 

遇到个问题（el-image默认放的图片可以显示，当我点击下一页时重新给srcList赋值的时候不显示赋值的图片）：我这里是先自己实现了上下页按钮接口请求不同的详情信息的这个功能，上面两种方法的数据项  srcList:[ ]  只放一个值，当我点击上下页按钮的时候再给 srcList 赋值的时候不显示赋值的图片，我代码是这样的：

this.srcList[0] = url　

然而，点击下一页时重新给srcList赋值的时候不显示赋值的图片

解决办法：

在每次执行点击的方法中 ，每次先给原来的this.srcList置空，再往里push新的url，就解决了

this.srcList = []
this.srcList.push(url)