vue-photo-preview组件在vue中的使用，可手势局部缩放大小，滑动

封装成适用的组件,我这里结合的是vant的swiper轮播组件，
所以想用先安装vant

一 封装组件

<template>
    <div class="information">
        <van-panel title="病情资料">
            <van-swipe 
                class="my-swipe"
                :loop="false" 
                :width="80"
                :height="80"
                :show-indicators="false"
                v-if="imgUrls.length"
                >
                <van-swipe-item 
                    v-for="(src,index) in imgs"
                    :key="index"
                    >
                    <img  v-lazy="src.url"  preview="index" class="img">
                </van-swipe-item>
            </van-swipe>
        </van-panel>                
    </div>
</template>
<script>
import preview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';
import Vue from "vue";
//preview的参数
var option = {
  minZoom:0.3,
  maxSpreadZoom: 20, // 控制预览图最大的倍数，默认是2倍，我这里改成了原图
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: true, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: true, //控制是否显示放大缩小按钮
  counterEl: true, //控制是否显示左上角图片数量按钮
  arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  allowPanToNext:true, //当前项目缩放时，允许滑动到下一个/上一个项目
  clickToCloseNonZoomable: false,//点击图片应关闭图库，仅当图像小于视口的大小时
  closeOnVerticalDrag:false,//垂直拖动和未缩放图像时，请关闭图库
  pinchToClose:false,//捏以关闭画廊手势
  getDoubleTapZoom:()=>1 //函数应返回缩放级别，在双击手势后，用户单击缩放图标或鼠标单击图像本身时，图像将缩放到该级别
}
Vue.use(preview,option)
export default {
    props:{
        imgUrls:{
            type:Array,
            default:()=>[]
        }
    },
    data () {
        return {
            imgs: []
        }
    },
    watch: {
        imgUrls:{
            handler(newval){
                this.imgs = [];
                if(newval) {
                    //获取屏幕宽高
                    let clientWidth = document.body.clientWidth;
                    let clientHeight = document.body.clientHeight;
                    this.imgs = newval.map(item=>{return {url:item+`?a=1&x-oss-process=image/resize,m_fill,h_${Math.floor(clientHeight/2)},w_${clientWidth}`}})
                }
            },
            immediate:true
        }
    },
    mounted () {
         //图片打开时
        //[preview 方法的使用] (https://photoswipe.com/documentation/options.html)
        this.$preview.on('imageLoadComplete',(e,item)=>{
            //event bus
            this.bus.$emit("previewOpen",item);
             //图片关闭
            this.$preview.self.listen("close",(e)=>{
                this.bus.$emit("previewClose",e);
            })
        })
    }
}
</script>
<style lang="scss" soped>
   .img{
        width: 140px;
        height: 140px;
        margin: 0 8px;
    }
</style>

二 组件调用

 <template>
    <div>
      <PreviewImage :imgUrls="imgUrls"></PreviewImage>
  </div>
</template>
<script>
   import PreviewImage from "@/components/ImagePreview/previewImage";
   export default {
     components: {
         PreviewImage
    },
    data(){
         return {
             imgUrls:[]
         }
    },
   mounted(){
         //使用事件总线监听图片的打开关闭事件
         //预览资料
        this.bus.$on("previewOpen",item=>{});
        //关闭预览图片
        this.bus.$on("previewClose",item=>{});
        //异步获取数据后需要调用this.$previewRefresh();否则可能图片打开失效
        setTimeout(()=>{
            this.imgUrls = data;
            this.$previewRefresh();
        },100)
   }，
    destroyed () {
        //销毁
        this.bus.$off("previewOpen");
        this.bus.$off("previewClose");
    }
 }
</script>