一个 vue 图片浏览器，支持单张图片和多图预览，可以自由移动、旋转、放大、缩小

1. 安装

1npm i img-preview-v

2. 使用

2.1 导入

1import { ImagePreview } from 'img-preview-v'

2.2 使用

1<script setup>
2const urlList = ref([
3  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
4])
5// const urlList = ref([
6//   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
7//   'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
8// ])
9</script>
10
11<templete>
12  <ImagePreview v-if="show" :url-list="urlList" @close="close"></ImagePreview>
13</templete>

3. 参数

1  /** 预览的链接列表 */
2  urlList: { type: Array, default: [] },
3
4  /** 预览视图的层级 */
5  zIndex: { type: Number },
6
7  /** 初始化时的下标, 小于等于 `url-list` 的长度. */
8  initialIndex: { type: Number, default: 0 },
9
10  /** 是否无限循环 */
11  infinite: { type: Boolean, default: true },
12
13  /** 点击背景视图是否隐藏视图 */
14  hideOnClickModal: Boolean,
15
16  /** 是否添加到body中；false添加到父类中，true添加到body中 */
17  teleported: Boolean,
18
19  /** 是否使用ESC关闭视图 */
20  closeOnPressEscape: { type: Boolean, default: true },
21
22  /** 缩放的速率  */
23  zoomRate: { type: Number, default: 1.2 },