Skip to content

leggod/vue-photoswipe5

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

基于vue2 和 photoswipe5.2.8 的图片预览

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published