手机图像查看器– img-vuer

手机图像查看器– img-vuer
插件名称 img-vuer
发布时间 2020年6月16日
插件作者 ssshooter

基于Vue 2.x的移动版图片查看器,

安装和下载:

# NPM
$ npm install img-vuer --save

变更日志:

2020年12月1日

  • v0.19.2

10/22/2019

  • v0.19.2

使用

// 引入 img-vuer,安装插件
import gallery from 'img-vuer'
Vue.use(gallery, {
  swipeThreshold: 150, // 滑动阈值,默认值 100
  isIndexShow: true, // 是否显示图片序号
  useCloseButton: true, // 只通过右上角关闭键退出浏览
  preload: true, // 预加载同组图片
})
<!-- 只需添加 v-gallery 到图片标签即可 -->
<img v-gallery :src="..." />

<!-- 图片分组 -->
<img v-gallery:groupName :src="..." />
<img v-gallery:groupName :src="..." />
<img v-gallery:groupName :src="..." />

<!-- 使用动态绑定的分组名称 -->
<img v-gallery="'groupName'" :src="..." />

<!-- 使用缩略图 -->
<img v-gallery :src="thumbnailSrc" data-large="originSrc" />

<!-- 退出浏览 -->
<button @click="$imgVuer.close()">close</button>

API

apiarg描述
close()/退出浏览
onIndexChange()cb$imgVuer.onIndexChange((newVal, oldVal)=>{...})
onToggle()cb退出或进入浏览时触发 $imgVuer.onToggle((newVal, oldVal)=>{...})
changeBGColor()color修改浏览器背景 $imgVuer.changeBGColor('#fff')
next()/下一幅图 $imgVuer.next()
prev()/上一幅图 $imgVuer.prev()
getCurrentIndex()//