cus-image-previewer

图片展示并附带图片预览功能组件

安装

npm install cus-image-previewer
# or
yarn add cus-image-previewer
# or
pnpm add cus-image-previewer

使用

templateUse.vue

<template>
  <cus-image-previewer :urlList="imageList"></cus-image-previewer>
</template>

<script lang="ts" setup>
import CusImagePreviewer from 'cus-image-previewer'

const imageList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

组件Props配置

| 属性名 | 说明 | 类型 | 默认值 | | ------------------ | ------------------------------------------------------------ | -------- | -------- | | urlList | 预览图片地址，默认只显示数组第一项 | Arrary | [] | | baseUrl | 图片基础地址，传入baseUrl时，urlList中值只传相对路径，最终图片路径会自动拼接 | string | "" | | teleported | 预览层是否启用传送门功能 | boolean | false | | teleportTarget | 传送门目标节点 | string | body | | initialIndex | 打开预览初始显示图片索引 | number | -1 | | infinite | 是否无限循环切换图片 | boolean | true | | hideOnClickModal | 点击模态框是否隐藏预览 | boolean | false | | closeOnPressEscape | 是否允许按ESC键关闭 | boolean | true | | zoomRate | 缩放步长 | number | 0.2 | | minScale | 最小缩放比例 | number | 0.2 | | maxScale | 最大缩放比例 | number | 7 | | showProgress | 是否显示预览加载进度 | boolean | false | | thumbnailStyle | 略缩图样式，可选："single" |"multiple"，"single"只显示第一张图片，"multiple"为陈列画廊模式 | string | "single" | | thumbnailMask | 略缩图遮罩层是否显示 | boolean | false | | imgWidth | 略缩图宽度，自由配置图片大小 | string | "90px" | | imgHeight | 略缩图高度，自由配置图片大小 | string | "90px" | | fit | 确定图片如何适应容器框, 可选："" | "fill" | "contain" | "cover" | "none" | "scale-down"，同原生 object-fit | string | "" | | loading | 浏览器加载图像的策略, 可选：eager：立即加载, lazy：延迟加载，和 浏览器原生能力一致 | string | "" | | alt | 原生属性 alt | string | "" | | referrerpolicy | 定义 img 元素在获取资源时的引用方式，原生属性 referrerPolicy。 | string | "" | | crossorigin | 浏览器加载图像的策略，原生属性 crossorigin | string | "" | | downloadable | 是否开启下载 | boolean | false | | download | 下载方法，开启允许下载但未传入下载方法将使用默认下载行为 | function | null | | zIndex | 预览层zIndex | number | 9999 | | previewMask | 略所图片时是否显示遮罩 | boolean | true |

组件slot

| slot | 说明 | | ------------------------------------------------------------ | ------------------------------------------------------------ | | <slot name="close" :closePreviewer="closePreviewer"></slot> | 预览遮罩层关闭图标 | | <slot name="prev" :prev="prev"></slot> | 预览上一张图标 | | <slot name="next" :next="next"></slot> | 预览下一张 | | <slot name="toolbar" :zoomOut="zoomOut" :zoomIn="zoomIn" :rotateLeft="rotateLeft" :rotateRight="rotateRight" :reset="reset" :fullscreen="fullscreen"></slot> | 预览工具栏 | | <slot name="thumbnailMask"></slot> | 略缩图遮罩样式 | | <slot name="thumbnailCount"></slot> | 当thumbnailStyle为single时，略缩图右下角会显示urlList的统计值样式 | | <slot name="progress" :current="activeIndex" :total="props.urlList.length"></slot> | 预览加载进度样式 |