element 不使用el-image 预览图片的组件

el-image

image-viewer

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

vue---html
 
//图片索引
 
{{ initialIndex +1}} / {{ srcList.length }}
css
.preview-index {
  position: fixed;
  top: 30px;
  z-index: 9999;
  left: 50%;
  margin-left: -20px;
  font-size: 18px;
  font-weight: bold;
  color:red;
}

js 
methods:{
  closeViewer() {
      this.showViewer = false
    },
  // 切换图片 index为图片下标值
    onSwitch(index) {
      this.initialIndex = index 
    }
}

参数	说明	类型	可选值	默认值
initialIndex	默认显示的第一张预览图（urlList的下标值）	Number	--	0
urlList	预览图的地址列表	Array	--	[]
zIndex	设置图片预览的 z-index	Number	--	2000
onClose	关闭图片预览时的回调函数	Function	--	--
onSwitch	切换上一张下一张图片时的回调函数	Function	--	--

图.png