强推#vue图片预览组件—v-viewer

忘是亡心i 2023-02-22 05:21 13阅读 0赞

## 强推\#vue图片预览组件—v-viewer ##

先来介绍一下背景

项目是用vue搭的，产品给的需求是：图片列表展示，要求点击图片可以放大。

原本就是写了一个弹出框，包裹相应图片就算完成了，但是！！！ 作为一个善于思考的前端娃，我一定要考虑更加全面哇，因为这些图片是病人的病历拍照上传，那么是不是还需要放大再放大的功能呢？（万一医生字太小）那么是不是还需要旋转调整方向呢？（万一上传图片倒了呢）所以，作为一个善于思考的…伸手党，我在网上找到了这个优秀的组件 —— v-viewer！！

真的是该有的功能都有，贼好用！

附上文档 https://mirari.cc/v-viewer/

这是我的截图，可以对图片进行缩放旋转各种效果

![https://img1.sycdn.imooc.com/5cef98840001cb3716001311.jpg][https_img1.sycdn.imooc.com_5cef98840001cb3716001311.jpg]

**下面看看怎么用**

\*\*—> 安装依赖

\*\*

npm install v-viewer --save

或者

cnpm install v-viewer --save

\*\*—> 全局引入

\*\*我是把它写在了最外层的main.js里了

import Viewer from 'v-viewer'
    import Vue from 'vue'
    Vue.use(Viewer)
    Viewer.setDefaults({
      zIndexInline: 9999
    })

**—> 使用**

使用方法极其简单，直接用标签把图片列表包裹住就好了。详见下面的代码，这里的photo是图片路径的数组，一定是数组，不然会出错。

<``viewer` `:images``=``"photo"``> ``  ``<``img` `v-for``=``"(src,index) in photo"` `:src``=``"src"` `:key``=``"index"``>```viewer``>

撒花 ???

大功告成，强烈推荐这个组件，真的是功能全配置还简单，而且很好看，因为我们这个项目要求不多，所以我连样式都没改，也是太省事了，大赞～

[https_img1.sycdn.imooc.com_5cef98840001cb3716001311.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcxLnN5Y2RuLmltb29jLmNvbS81Y2VmOTg4NDAwMDFjYjM3MTYwMDEzMTEuanBn?x-oss-process=image/format,png