vue-element-plus-admin

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