# DEMO {#demo}

打开预览（第一张） 打开预览（第二张）

# 背景 {#背景}

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

• 但在特定业务场景下，需要通过点击按钮或链接来实现图片预览功能，但官方并未提供相关方法。

• 通过查阅elementUI源码发现 el-image-viewer 组件

# 实现方法 {#实现方法}

1. 引入 el-image-viewer 组件

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

2. 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>