Vue3图片预览（Image）
本图片预览组件主要包括以下功能：
-
展示图片时，可设置鼠标悬浮时的预览文本；图像无法加载时要显示的描述；自定义图像高度和宽度；设置图像如何适应容器高度和宽度（ fill(填充) | contain(等比缩放包含) | cover(等比缩放覆盖)）；传入单张图像或图像数组；设置图像缩放比率；设置最大最小缩放比例；
-
单张图片预览时，左上角展示图片名称：可顺时针旋转或逆时针旋转；还原图片；放大缩小；鼠标任意拖动；鼠标双击图片还原；使用触摸板或鼠标滚轮控制图片缩放；
-
多张图片预览时，除了单张展示的功能以外：可点击左右切换按钮预览多张图片；使用键盘上下左右按键进行图片切换；设置是否可以循环切换图片；
可自定义设置以下属性：
-
图像地址 | 图像地址数组（class="lazy" data-src），类型：string | Array<{class="lazy" data-src: string, alt?: string}>，默认 ''
-
图像无法加载时显示的描述（alt），类型：string，默认 'image'
-
图像宽度（width），类型：string | number，单位px，默认 300
-
图像高度（height），类型：string | number，默认 '100%'
-
图形如何适应容器高度和宽度（fit），类型：'contain'|'fill'|'cover'，默认'contain'，可选 fill(填充)、contain(等比缩放包含)、cover(等比缩放覆盖)
-
预览文本（preview），类型：string | slot，默认 '预览'
-
每次缩放比率（zoomRatio），类型：number，默认 0.1
-
最小缩放比例（minZoomScale），类型：number，默认 0.1
-
最大缩放比例（maxZoomScale），类型：number，默认 10
-
缩放移动旋转图片后，是否可以双击还原（resetOnDbclick），类型：boolean，默认 true
-
是否可以循环切换图片（loop），类型：boolean，默认 false
-
相册模式，即从一张展示图片点开相册（album），类型：boolean，默认 false
效果如下图：在线预览
预览时样式：
正常展示时样式：
图片加载时样式：
鼠标悬浮时样式：
其中引入组件：Vue3加载（Spin）
①创建图片预览组件Image.vue：
![]()
{{ preview }}
{{ getImageName(images[previewIndex]) }}
{{ (previewIndex + 1) }} / {{ imageCount }}
![]()
②在要使用的页面引入：
Image 图片基本使用
多张图片预览，同时支持键盘 (left / right / up / down) 按键切换 (class="lazy" data-src: images)
多张图片预览，支持循环切换图片 (loop: true)
多张图片预览，相册模式 (album: true)
预览文本设为 preview 同时图片覆盖容器 (preview: preview & fit: cover)
preview
更改缩放比率和最大最小缩放比例 (zoomRatio: 0.2 & minZoomScale: 0.5 & maxZoomScale: 2)
来源地址：https://blog.csdn.net/Dandrose/article/details/130194124
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
