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 预览图片和视频_第1张图片
Vue3 预览图片和视频_第2张图片

注意:我在里面直接用了Elment Plus的样式,如果要单独使用还得把这些样式也给提取出来,因为是scss我的项目没有用,要提取有点麻烦而且我本来就用的Element Plus,就没弄

你可能感兴趣的