vue-photo-preview简单使用

最近的一个项目尝试了3-4个预览图组件，都快疯了，还没确定使用哪个，都不太满意（其实是产品不满意，我移动端到是挺满意vant的预览图，就产品B事多），但是还是记录一下这个预览图插件(vue-photo-preview)
vue-photo-preview是一个移动端多图预览插件,PC端其实也挺好用的，很棒
1.安装依赖

npm install vue-photo-preview --save

2.在全局引入（main.js）

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

如果有需要改变默认配置的，可以这样来使用

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
var 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)

4.在vue项目的代码

//在img标签添加preview属性 preview值相同即表示为同一组
// 如果你只想预览，不想轮播，而且刚好又是循环的，可以这样    :preview="item.id",这样就不会有相同的preview值
 <img v-lazy="cosServer + item.imageurl" preview="1" :large="cosServer + item.imageurl" alt @load="imgLoad" />

5.原插件photoswipe的事件响应,可以在mounted函数里面写,

 mounted () {
    this.$previewRefresh()
    this.$preview.on('close', () => {
      this.isShow = false
    })
  }

6.如果图片是异步生成的，在图片数据更新后调用,其实就是后台的图片获取的时候添加,图片如果是异步获取，那么在获取之后要使用this.$previewRefresh()来重置一下，不然不生效。

// 请求回来后的
  res.detail.worklist.forEach((v, i) => {
          if (v.type === 0) {
            this.workSwiperList.push(this.cosServer + v.imageurl)
            this.$previewRefresh()
          }
        })

最后编辑于：2020.06.23 09:22:01