Vue 图片浏览插件 img-vuer 已支持 Vue3

Vue2 可用版本： https://github.com/ssshooter/img-vuer/tree/legacy

一个移动端优先的 Vue3 图片预览插件

• 极速使用
• 滑动手势
• 缩放手势
• 支持缩略图
• 使用 scale() 修复放大模糊问题
• 移动优先，但支持桌面浏览器
• 返回键退出浏览（安卓手机）

点击查看使用实例或扫描二维码

安装

npm i img-vuer3 --save

使用

// 引入 img-vuer，安装插件
import gallery from 'img-vuer3'
import 'img-vuer3/dist/style.css'

app.use(gallery, {
  swipeThreshold: 150, // 滑动阈值，默认值 100
  isIndexShow: true, // 是否显示图片序号
  useCloseButton: true, // 只通过右上角关闭键退出浏览
  preload: true, // 预加载同组图片
  sliderBackgroundColor: 'rgba(0,0,0,0.6)',
  sliderZIndex: 1001,
})

<!-- 只需添加 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>