Element-UI的点击按钮实现图片预览功能

工作需求：点击按钮实现图片预览功能

场景为后台管理系统中需要功能为点击按钮实现预览图片

Vue 2.6.10 + Element-UI

• 应用element的el-image-viewer 组件

1. 引入ElImageViewer 该组件

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

2. 使用组件

// html


<el-image-viewer v-if="showViewer" :on-close="showViewerClose" :url-list="[guidePic]"></el-image-viewer>
<el-button type="primary" size="small" @click="getPreview"></el-button>
// script
components:{ ElImageViewer },
data(){
	return{
		showViewer: false,
		guidePic:null // 预览图片的地址
	}
},
method:{
	showViewerClose(){
		this.showViewer = false
	},
	getPreview(){
		this.guidePic ? this.showViewer = true: this.$message.info('当前没有可预览的图片')
	}
}