Vue3 预览图片和视频
项目中遇到一组数据既有可能是图片，也有可能是视频，需要同时预览的情况，搜了一下，找到了vue-gallery，试了一下之后发现没法在VUE3下没法用，不知道是真的完全没法用，还是因为我用的Composition API才没法用，没去纠结。
没找到其他的，只好自力更生，但是也没有完全自力更生。我留意到了Element Plus的Image组件是可以大图预览的，毕竟Element Plus是开源的，只要稍微改一下，对图片和视频资源做一个判断，然后分别显示img和video不就可以了。于是我找到了Element Plus的image-viewer的源码，做了一下修改，核心的修改地方如上面所说的，加了判断和video
文章图片
然后把图片预览的相关操作比如放大缩小旋转等工具条在视频的时候给隐藏，把Element Plus的部分ts语法改成js，部分工具函数给拿出来，事件函数on和off给重写下，就完事了，完整代码如下
文章图片
【Vue3 预览图片和视频】使用
大功告成
文章图片
文章图片
注意：我在里面直接用了Elment Plus的样式，如果要单独使用还得把这些样式也给提取出来，因为是scss我的项目没有用，要提取有点麻烦而且我本来就用的Element Plus，就没弄
