V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ssshooter
V2EX  ›  分享创造

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

  •  
  •   ssshooter · 31 天前 · 492 次点击

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

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

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

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

    QRcode

    安装

    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>
    
    目前尚无回复
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1929 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 16:11 · PVG 00:11 · LAX 09:11 · JFK 12:11
    ♥ Do have faith in what you're doing.