import{o as a,c as t,a as n}from"./app.51e46c58.js";const s='{"title":"ImageViewer 图片预览组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"createImageViewer","slug":"createimageviewer"},{"level":3,"title":"参数","slug":"参数"}],"relativePath":"components/image-viewer.md","lastUpdated":1721205967753}',e={},p=n('

ImageViewer 图片预览组件

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

ImageViewer 组件位于 src/components/ImageViewer 内

用法

<script setup lang="ts">\nimport { createImageViewer } from '@/components/ImageViewer'\nimport { ElButton } from 'element-plus'\n\nconst open = () => {\n  createImageViewer({\n    urlList: [\n      'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',\n      'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',\n      'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',\n      'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',\n      'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',\n      'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'\n    ]\n  })\n}\n</script>\n\n<template>\n  <ElButton type="primary" @click="open">预览</ElButton>\n</template>\n\n

createImageViewer

参数

属性说明类型可选值默认值
urlList图片列表string[]--
zIndex层级number--
initialIndex默认展示第几张number-1
infinite是否可以循环切换boolean-true
hideOnClickModal点击蒙版是否关闭boolean-false
appendToBody是否添加到 body 中boolean-false
show是否显示图片预览boolean-false
',8);e.render=function(n,s,e,o,c,l){return a(),t("div",null,[p])};export default e;export{s as __pageData};