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

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

先来介绍一下背景

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

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

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

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

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

下面看看怎么用

**—> 安装依赖

**

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``>

撒花 ???

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