NASA Planetary Mission

    vue-photoswipe5

    1.0.10 • Public • Published

    vue-photoswipe5

    优点

    • 基于 photoswipe5.2.8,其优点一个都不落下。
      • 基于 ES6 重写
      • 更简单的初始化和动态导入
      • 更新动画和手势引擎
      • 仅一个css文件,没有外部资源
      • 内置响应式图像
      • and so on
    • 使用非常简单,支持两种方式调用
    • 不需要安装任何依赖,体积小,仅72kb。(官方4.1.3版本731 kB,使用其他作者的包,包里面还有一层依赖,体积会更大)
    • 一次加载全局有效,任何组件中使用都不会增加代码体积(再也不需要管按需不按需,再也不用局部引入)

    安装

    npm install --save vue-photoswipe5

    引入

    import Vue from 'vue'
    import vuephotoswipe from 'vue-photoswipe5'
    //可选配置请看最后
    const options = {
    
    }
    Vue.use(vuephotoswipe, options)

    使用js调用

    // 需要打开的图片索引
    const index = 0;
    // 最好按照此数据格式
    const imagesList = [
        { src: 'https://dummyimage.com/800x600/555/fff/?text=1', width: 800, height: 600 },
        { src: 'https://dummyimage.com/800x600/555/fff/?text=2', width: 800, height: 600 },
        { src: 'https://dummyimage.com/800x600/555/fff/?text=3', width: 800, height: 600 },
        { src: 'https://dummyimage.com/800x600/555/fff/?text=4', width: 800, height: 600 },
        { src: 'https://dummyimage.com/800x600/555/fff/?text=5', width: 800, height: 600 },
    ]
    // 查看当前数组的第一张图
    Vue.$previewImage(index,imagesList);

    使用指令调用

    指令可以加在任何元素上,不一定非要是img,同时最好传入要预览的宽高。不然你得踩坑了

    相同的指令值会被认为是同一组预览数据 指令所在的元素会加上一个click 事件,自动触发预览

    <template>
      <img v-for="item in imagesList" :key="item.src" :src="item.src+'?imageView2/2/w/500/q/100'" v-preview='1' :data-src="item.src" :data-width="item.width" :data-height="item.height">
    </template>
    <script>
      ...
      data(){
        return {
          imagesList: [
            { src: 'https://dummyimage.com/800x600/555/fff/?text=1', width: 800, height: 600 },
            { src: 'https://dummyimage.com/800x600/555/fff/?text=2', width: 800, height: 600 },
            { src: 'https://dummyimage.com/800x600/555/fff/?text=3', width: 800, height: 600 }
          ]
        }
      }
      ...
    </script>

    插件其他功能

    Vue.$lightbox // 可访问photoswipe 实例
    
    // 所以可以这么做
    Vue.$lightbox.on('beforeOpen', () => {
      console.log('beforeOpen');
      // photoswipe starts to open
    });
    
    Vue.$lightbox.on('firstUpdate', () => {
      console.log('firstUpdate');
      // photoswipe keeps opening
      // you may modify initial index or basic DOM structure
    });
    
    Vue.$lightbox.on('initialLayout', () => {
      console.log('initialLayout');
      // photoswipe measures size of various elements
      // if you need to read getBoundingClientRect of something - do it here
    });
    
    Vue.$lightbox.on('change', () => {
      // triggers when slide is switched, and at initialization
      console.log('change');
    });
    
    // 等等

    可选配置

    • showHideAnimationType:'zoom'/ 'fade' / 'none' //过度动画
    • 点击操作(以下属性值是一样的)
      • imageClickAction: 单击图像。
      • tapAction 点击-点击Photosweep视口内容(不包括按钮)。
      • doubleTapAction 双击-双击任何内容。如果此选项设置为false,则删除点击延迟。
      • bgClickAction bgClickAction-用鼠标单击图像周围的区域(背景)。
        • 'zoom' “缩放”-缩放当前图像(取决于辅助缩放级别)(默认双击)。
        • 'zoom-or-close' “缩放或关闭”-如果无法缩放图像,图像将被关闭(默认imageClickAction)。
        • 'toggle-controls' “切换控件”-切换控件的可见性(默认点击)。
        • 'next' 下一张
        • 'close' “关闭”
        • 或者是一个方法,可执行任何操作
    • bgOpacity: 0.8 //背景透明度
    • spacing: 0.1 //幻灯片之间的间距。定义为相对于视口宽度的比率(0.1 = 视口的 10%)
    • preload:[1,1] //预览时加载前一个和后一个,所以第一次点击是加载3张,且1是最小值,0不行
    • 更多配置

    有用的提示

    如果没传入宽高导致图片预览铺满整个屏幕,图片变形,可以尝试覆盖

    .pswp__img{object-fit: contain;}

    更新日志

    • 2022.7.5 修复指令使用的bug,新增全局实例
    • 2022.7.4 新增指令调用;更新README;
    • 2022.6.x init

    Install

    npm i vue-photoswipe5

    DownloadsWeekly Downloads

    1

    Version

    1.0.10

    License

    none

    Unpacked Size

    74.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • leggod