element-ui大图预览,图片查看器el-image-viewer组件浏览图片

我的需求并不是展示图片后再点击图片打开大图浏览，可能是一个文字或者一个按钮，点击后查看大图

 

 通过翻看element-ui Image组件源码，发现大图预览是一个小组件el-image-viewer

 

 在看看el-image-viewer小组件源码，发现暴露出了几个属性

props: {
    //绑定的文件列表
    urlList: {
      type: Array,
      default: () => []
    },
    //查看器层级
    zIndex: {
      type: Number,
      default: 2000
    },
    //图片切换事件
    onSwitch: {
      type: Function,
      default: () => {}
    },
    //查看器关闭事件
    onClose: {
      type: Function,
      default: () => {}
    },
    //初始化展示哪张图片
    initialIndex: {
      type: Number,
      default: 0
    },
    //自身是否插入至 body 元素上
    appendToBody: {
      type: Boolean,
      default: true
    },
    //点击蒙层是否允许关闭
    maskClosable: {
      type: Boolean,
      default: true
    }
  }

需要使用的属性我们知道了，然后我们就在代码里面引入image-viewer就可以直接使用。

<template>
	<div>
		<el-button @click="onPreview">预览</el-button>
		<el-image-viewer
			v-if="showViewer"
			:zIndex="8000"
			:on-close="closeViewer"
			:url-list="previewImgList"
			:initial-index="preIniIndex"
		/>
	</div>
</template>
<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
	name: 'Test',
	components: { ElImageViewer },
	data() {
		return {
			preIniIndex: 0, // 初始化展示哪张图片
			showViewer: false, // 显示查看器
			previewImgList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
		}
	},
	methods: {
		onPreview() {
			this.showPreviewImg(this.previewImgList[0])
			this.showViewer = true
		},
		// 关闭查看器
		closeViewer() {
			this.showViewer = false
		},
		// 设置点击哪张图预览哪张图片方法
		showPreviewImg(url) {
			let previewImgList = this.previewImgList
			for (let index in previewImgList) {
				if (previewImgList[index] === url) {
					this.preIniIndex = Number(index)
					break
				}
			}
			//console.log('触发了吗')
			this.showViewer = true
		}
	}
}
</script>

 也可以自行封装成一个公共组件，用起来会方便很多。