本图片预览组件主要包括以下功能：

展示图片时，可设置鼠标悬浮时的预览文本；图像无法加载时要显示的描述；自定义图像高度和宽度；设置图像如何适应容器高度和宽度（ fill(填充) | contain(等比缩放包含) | cover(等比缩放覆盖)）；传入单张图像或图像数组；设置图像缩放比率；设置最大最小缩放比例； 单张图片预览时，左上角展示图片名称：可顺时针旋转或逆时针旋转；还原图片；放大缩小；鼠标任意拖动；鼠标双击图片还原；使用触摸板或鼠标滚轮控制图片缩放； 多张图片预览时，除了单张展示的功能以外：可点击左右切换按钮预览多张图片；使用键盘上下左右按键进行图片切换；设置是否可以循环切换图片；

可自定义设置以下属性：

图像地址 | 图像地址数组（src），类型：string | Array<{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：

 ②在要使用的页面引入：

查看原文