vue 图片放大vue-photo-preview插件使用

项目中用到图片放大，找了一圈发现vue-photo-preview还是蛮好用的，推荐

1、安装vue-photo-view

npm install vue-photo-preview --save

2、main.js

import Preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let option = {
  maxSpreadZoom: 1, // 控制预览图最大的倍数，默认是2倍，我这里改成了原图
 fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: false, //控制是否显示放大缩小按钮
  counterEl: false, //控制是否显示左上角图片数量按钮
  arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(Preview, option)

3、项目中使用

<img v-for="i in item.images" :src="i" Preview="0" @load="imageLoad" alt=""> //这里Preview="0"一定要配置

4、图片是后台请求过来的，要在加载完成后this.$previewRefresh(),否则无效

this.$previewRefresh()