ImageViewer 图片预览组件

将 element-plus 的 ImageViewer 组件函数化，通过函数方便创建组件。

ImageViewer 组件位于 src/components/ImageViewer 内

用法

<script setup lang="ts">
import { createImageViewer } from '@/components/ImageViewer'
import { ElButton } from 'element-plus'

const open = () => {
  createImageViewer({
    urlList: [
      'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',
      'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',
      'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',
      'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',
      'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',
      'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'
    ]
  })
}
</script>

<template>
  <ElButton type="primary" @click="open">预览</ElButton>
</template>

createImageViewer

参数

属性	说明	类型	可选值	默认值
urlList	图片列表	string[]	-	-
zIndex	层级	number	-	-
initialIndex	默认展示第几张	number	-	1
infinite	是否可以循环切换	boolean	-	true
hideOnClickModal	点击蒙版是否关闭	boolean	-	false
appendToBody	是否添加到 body 中	boolean	-	false
show	是否显示图片预览	boolean	-	false