Vue3.0实现图片预览组件（媒体查看器）

前言：最近项目中有个场景，一组图片、视频、音频、文件数据，要求点击图片可以放大预览，左右可以切换音视频、文件，支持鼠标及各种键控制 缩放，左右旋转，移动等功能，整理了一下，封了个组件，注释很全面，每块地方都有讲解，可以直接拿到项目中使用

先看下效果：

clg

关于传值：

（必传）传入url数组urlList，传入图片所处index，也就是在数组中的索引

（非必传）是否支持无限滚动？是否支持ESC键退出？是否支持点击遮罩层退出？是否需要工具栏？

关于图片的相关特效：

定义一个transform样式对象，包含缩放scale、旋转deg、移动offsetX|offsetY、动画enableTransition，可在computed计算中返回由此对象组成的css样式对象，在模板中对图片绑定，当去触发特效相关各类事件时，改变对象里某个值，则会重新捕获对象的改变执行computed，去实时更新图片样式

  1. 缩放操作： 可以通过鼠标滚动上下滑动、键盘上下键up/down、组件内部工具栏按钮这三种方式去控制此特效，定义一个缩放比，即每次缩放的程度，可以根据项目场景自行定义，我这里键盘控制、按钮点击为1.4，鼠标滚轮偏小为1.2,  每次缩放让初始化的样式对象的scale每次乘或除以这个值即可，当然无限缩小无限放大肯定不行，需要定义一个最小最大值控制

   2. 旋转操作： 定义一个旋转常量为90度，顺时针旋转让初始化样式对象deg累加这个值，逆时针相反即可

   3. 移动操作： 顾名思义，也就是在遮罩层内可以通过鼠标对图片进行移动，在鼠标按下事件内，监听鼠标移动事件，每次移动记录下当前鼠标位置，计算offsetX也就是图片要移动的translateX为：移动前的距页面左侧距离offsetX加上当前的鼠标位置event.pageX - 移动前的鼠标位置; 上下移动同理

   4. 动画过渡： 根据特效的触发方式决定是否需要过渡，我这里对通过鼠标操作缩放时没有定义动画，其余操作方式建议都要加上

关于图片初始化展示：

如果想要图片能够自适应在遮罩层的容器内，并且保证图片不变形且宽或高不溢出容器，那么就不应该定死宽高或者是不去定义宽高，我这里解决办法是对图片进行等比例的缩放，具体算法就不在这里过多讲解了，详情：https://blog.csdn.net/dabaooooq/article/details/128852363

关于音视频展示：

视频我这里用的是 vue3-video-play 这个插件，ui和功能各方面整体感觉很棒，算是对Vue 3.0支持比较好的一个吧，详情可以参考：https://codelife.cc/vue3-video-play/

音频用的是原生audio，用法很方便，没什么可讲的，具体看代码

关于抛出数据：

顶部中间一般为图片当前索引index/总长度，当然默认的为这样，抛出index，可以自定义这块地方插槽的使用，顶部左侧插槽也暴露当前index，其实当前组件最需要的数据也莫过于index，暴露方法中也基本都有抛出

附上完整代码