如图所示

img

预期

可通过点击事件，动态赋值图片的url进行预览

1 引入组件

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

2 注册组件

export default {
    components: { ElImageViewer },
}

3 使用

<template>
  <el-image-viewer
    :url-list="imageUrls"
    :initial-index="currentIndex"
    :on-switch="handleSwitch"
    :on-close="handleClose"
  ></el-image-viewer>
</template>

4 属性说明

  • url-list ：要在查看器中显示的图像 URL 的数组，类型：Array, 默认值: []
  • z-index ：图像查看器的 z-index， 类型：Number, 默认值: 2000
  • on-switch ：切换图像时的回调函数。它接收新的索引作为参数，类型：Function, 默认值: () => {}
  • on-close ：查看器关闭时的回调函数，类型：Function, 默认值: () => {}
  • initial-index ：要初始显示的图像的索引，类型：Number, 默认值: 0
  • append-to-body ：指定是否将图像查看器组件附加到 body 元素上。如果设置为 true，它将添加到 body；否则，它将放在原位置，类型：Boolean, 默认值: true
  • mask-closable ：确定是否点击遮罩区域应关闭查看器，类型：Boolean, 默认值: true