Skip to content

el-image-viewer

element-ui之el-image-viewer的图片查看器

查看源码,它的props接受5个分别是

使用方法:

vue
<template>
	<div>
    <el-button @click="onPreview">预览</el-button>
     <el-image-viewer
      v-if="showViewer"
      :initial-index="initialIndex"
      :on-close="closeViewer"
      :url-list="fileUrlList" />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
	components:{ElImageViewer},
  data() {
    return {
    	showViewer:false, //显示图片
      initialIndex:0, //显示图片列表的下标
      fileUrlList:[], // 图片列表url存放
    }
  }
  methods:{
  	onPreview(){
      this.showViewer = true
  	},
		closeViewer(){
    	this.showViewer = false
    }
	}
}
</script>