查看大图： vue查看大图

vue: 查看大图

• 1、普遍情况下，我们都是自己写一个弹窗，来查看图片，但是这样功能不太全面，比如图片放大，旋转等等。马上开始：安装依赖

npm install v-viewer --save

• 2、全局引入

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

• 3、单个 图片使用

<viewer>
  <img :src="scope.row.filePath" style="width: 80px;" alt="">
</viewer>

• 4、多个 图片使用

<viewer :images="photo"> 
      //photo 一定要一个数组，否则报错
   <imgm v-for="(src,index) in photo" :src="src" :key="index" :onerror="errorImg">
</viewer >

• 5、放在 iview组件 中，viewer标签 要放在 iview组件外面，不然会报错哒, 如下是正确写法

// viewer  放在 <Carousel> 的外面
<viewer :images="item.picUrls">
   <Carousel>
       <CarouselItem  v-for="(ele, i) in item.picUrls" :key="i">
          <img :src="ele.url">
      </CarouselItem>
 </Carousel>
</viewer>

• 6、效果图如下：

  
  image.png

总结

1. 官网地址

https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/

2. 参数说明如下

   
   image.png