JS调用elementUI图片预览

# DEMO

# 背景

elementUI提供了图片组件 el-image 来实现大图预览。

<el-image :src="url" :preview-src-list="srcList" />

但在特定业务场景下，需要通过点击按钮或链接来实现图片预览功能，但官方并未提供相关方法。
通过查阅elementUI源码发现 el-image-viewer 组件

# 实现方法

引入 el-image-viewer 组件

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
	components: { ElImageViewer },
}

1
2
3
4

DEMO源码

点击查看 DEMO 源码

<template>
  <div>
    <button @click="openImageView(0)">打开预览（第一张）</button>
    <button @click="openImageView(1)">打开预览（第二张）</button>
    <el-image-viewer
			v-if="showViewer"
			:on-close="() => { showViewer = false }"
			:url-list="imgList"
			:initialIndex="initialIndex"
		/>
  </div>
</template>

<script>
export default {
	data() {
		return {
			showViewer: false, // 图片预览组件
			initialIndex: 0, // 图片预览index
      imgList: [
        '//cdn.1024vip.cn/tech/images/avatar/1.jpg',
        '//cdn.1024vip.cn/tech/images/avatar/2.jpg',
        '//cdn.1024vip.cn/tech/images/avatar/3.jpg',
        '//cdn.1024vip.cn/tech/images/avatar/4.jpg',
        '//cdn.1024vip.cn/tech/images/avatar/5.jpg',
      ]
		}
	},
	methods: {
    openImageView(idx) {
      this.initialIndex = idx
      this.$nextTick(() => {
        this.showViewer = true
      })
    }
	},
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#elementUI

上次更新: 2021-05-14 18:15:38

← JS图片压缩 JS图片上传前校验大小、尺寸→